Tabs im Karteikarten-Stil
Der aktive Tab hebt sich an und verbindet sich mit dem Panel darunter, wie der Reiter einer Mappe.
Einstellungen
Code
<div class="uv-ftk"><div class="tb"><button class="on">Übersicht</button><button>Details</button><button>Notizen</button></div><div class="pn">Panelinhalt</div></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Filter
Wofür du ihn nutzen kannst
Gut für Detailseiten, auf denen hinter jedem Tab viel Inhalt steckt. Die Produktseite eines Baumarkt-Shops mit Beschreibung, Technische Daten und Versand, oder eine Kundenakte in einem kleinen CRM mit Übersicht, Details und Notizen. Weil Tab und Panel wie ein Stück wirken, ist sofort klar, was zusammengehört. Viele suchen genau das als Karteireiter in CSS.
Der Effekt funktioniert nur, wenn Tab und Panel exakt denselben Hintergrund haben. Ändere also immer beide. Die Optik ist etwas klassisch, was bei Business-Tools hilft und bei einer verspielten Marke eher stört.