Tabs mit Füllerunterstrich
Kursive Serifen-Tabs, unter denen sich ein Tintenstrich beim gewählten Tab zeichnet und beim vorherigen wieder verschwindet.
Einstellungen
Code
<div class="uvq12-it"><div role="tablist" aria-label="Bereiche"><button type="button" role="tab" id="uvq12-it-t0" aria-selected="true" aria-controls="uvq12-it-p0" tabindex="0"><span>Essays</span><svg viewBox="0 0 100 12" preserveAspectRatio="none" aria-hidden="true"><path d="M2 7c18-4 30 3 48 0s32-3 48 1" pathLength="1"/></svg></button><button type="button" role="tab" id="uvq12-it-t1" aria-selected="false" aria-controls="uvq12-it-p1" tabindex="-1"><span>Notizen</span><svg viewBox="0 0 100 12" preserveAspectRatio="none" aria-hidden="true"><path d="M3 8c10-5 22 2 34-1s30-4 60 0" pathLength="1"/></svg></button><button type="button" role="tab" id="uvq12-it-t2" aria-selected="false" aria-controls="uvq12-it-p2" tabindex="-1"><span>Briefe</span><svg viewBox="0 0 100 12" preserveAspectRatio="none" aria-hidden="true"><path d="M2 6c20 3 40-3 60 0s25 2 36-1" pathLength="1"/></svg></button><button type="button" role="tab" id="uvq12-it-t3" aria-selected="false" aria-controls="uvq12-it-p3" tabindex="-1"><span>Gedichte</span><svg viewBox="0 0 100 12" preserveAspectRatio="none" aria-hidden="true"><path d="M2 8c15-3 25 1 45-2s35 3 51 0" pathLength="1"/></svg></button></div><div class="pn" role="tabpanel" id="uvq12-it-p0" aria-labelledby="uvq12-it-t0">Zwölf kurze Texte über die Stadt und den Lärm.</div><div class="pn" role="tabpanel" id="uvq12-it-p1" aria-labelledby="uvq12-it-t1" hidden>Lose Notizen, Listen und im Zug aufgeschnappte Sätze.</div><div class="pn" role="tabpanel" id="uvq12-it-p2" aria-labelledby="uvq12-it-t2" hidden>Briefwechsel mit Freunden, die weit weg wohnen.</div><div class="pn" role="tabpanel" id="uvq12-it-p3" aria-labelledby="uvq12-it-t3" hidden>Kurze Verse, im Morgengrauen geschrieben.</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 Navigation
Alle ansehen: NavigationWofür du ihn nutzen kannst
Literarische Tabs in kursiver Serifenschrift, bei denen der aktive Tab einen handgezeichneten Tintenstrich bekommt. Beim Wechsel wird der alte Strich von seinem Anfang her gelöscht und der neue von links nach rechts gezogen; beim Hovern erscheint vorher eine zarte Bleistiftlinie. Jeder Strich ist ein SVG-Pfad mit stroke-dashoffset, passend für Blogs, Magazine, Portfolios und Schreib-Apps.
Die Hauptfarbe ist die Tinte, die Zweitfarbe der Bleistift der Vorschau. Ändere den Pfad in den Daten, damit jeder Tab sein eigenes Zittern hat, und halte die Beschriftungen bei ein oder zwei Wörtern.