Fountain pen underline tabs
Italic serif tabs where an ink stroke draws itself under the chosen one and wipes away from the previous one.
Settings
Code
<div class="uvq12-it"><div role="tablist" aria-label="Sections"><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>Notes</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>Letters</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>Poems</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">Twelve short pieces about the city and its noise.</div><div class="pn" role="tabpanel" id="uvq12-it-p1" aria-labelledby="uvq12-it-t1" hidden>Loose notes, lists and lines overheard on the train.</div><div class="pn" role="tabpanel" id="uvq12-it-p2" aria-labelledby="uvq12-it-t2" hidden>Letters to friends who live far away.</div><div class="pn" role="tabpanel" id="uvq12-it-p3" aria-labelledby="uvq12-it-t3" hidden>Short verses written before dawn.</div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Navigation
See all NavigationWhere to use it
Literary tabs set in italic serif, where the active one gets a hand-drawn ink underline. When you switch, the old stroke wipes away from its start and the new one is drawn from left to right, and hovering shows a faint pencil line first. Each stroke is an SVG path animated with stroke-dashoffset, which suits blogs, magazines, portfolios and writing apps.
The main color is the ink and the secondary color the pencil preview. Change the path in the data to give each tab its own wobble, and keep the labels to one or two words.