Ideas
- App para regar plantas
- Taller de cerámica
- Mapa de cafés
Tareas
- Llamar al fontanero
- Pagar el seguro
- Comprar sobres
Lecturas
- Novela de verano
- Poemas de Lorca
- Guía de setas
Recetas
- Gazpacho de fresa
- Pan de centeno
- Arroz al horno
HTML + CSSNavigation
Ring binder divider tabs
Coloured card tabs stick out from the edge of a ruled notebook, and the page turns when you pick another one.
Settings
16px
1x
Code
<div class="uvq12-bt"><div class="tbs" role="tablist" aria-label="Notebook" aria-orientation="vertical"><button type="button" role="tab" id="uvq12-bt-t0" aria-selected="true" aria-controls="uvq12-bt-p0" tabindex="0" style="--t:#fde68a"><span>Ideas</span></button><button type="button" role="tab" id="uvq12-bt-t1" aria-selected="false" aria-controls="uvq12-bt-p1" tabindex="-1" style="--t:#bbf7d0"><span>Tasks</span></button><button type="button" role="tab" id="uvq12-bt-t2" aria-selected="false" aria-controls="uvq12-bt-p2" tabindex="-1" style="--t:#bfdbfe"><span>Reading</span></button><button type="button" role="tab" id="uvq12-bt-t3" aria-selected="false" aria-controls="uvq12-bt-p3" tabindex="-1" style="--t:#fecaca"><span>Recipes</span></button></div><div class="pg"><span class="ho" aria-hidden="true"></span><div class="pn" style="--t:#fde68a" role="tabpanel" id="uvq12-bt-p0" aria-labelledby="uvq12-bt-t0"><h4>Ideas</h4><ul><li>Plant watering app</li><li>Pottery workshop</li><li>Café map</li></ul></div><div class="pn" style="--t:#bbf7d0" role="tabpanel" id="uvq12-bt-p1" aria-labelledby="uvq12-bt-t1" hidden><h4>Tasks</h4><ul><li>Call the plumber</li><li>Pay the insurance</li><li>Buy envelopes</li></ul></div><div class="pn" style="--t:#bfdbfe" role="tabpanel" id="uvq12-bt-p2" aria-labelledby="uvq12-bt-t2" hidden><h4>Reading</h4><ul><li>Summer novel</li><li>Poems by Lorca</li><li>Mushroom guide</li></ul></div><div class="pn" style="--t:#fecaca" role="tabpanel" id="uvq12-bt-p3" aria-labelledby="uvq12-bt-t3" hidden><h4>Recipes</h4><ul><li>Strawberry gazpacho</li><li>Rye bread</li><li>Baked rice</li></ul></div></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
Divider tabs from a ring binder: pastel card tabs stick out of a ruled notebook page with punched holes and a red margin line. The chosen tab slides forward and the page turns slightly as the new list appears in a handwritten style. It is pure CSS with a tab script, made for note apps, planners, recipe sites and personal dashboards.
Give each tab its own colour in the data and use the main color for the ink. Short, single words work best on the vertical labels, and three to five tabs keep the edge tidy.