Si tu perfil es privado, solo tus seguidores verán lo que publicas.
- Rrober_88
- Nnube.gris
HTML + CSSOverlays
Stacked sheets with depth
Sheets that open on top of each other: the one behind shrinks and darkens, and Escape only closes the top one.
Settings
16px
1x
Code
<div class="uvq13-stk"><div class="pg" aria-hidden="true"><i class="h"></i><i></i><i></i><i></i><i></i><i class="s"></i></div><button type="button" class="fire" aria-haspopup="dialog">Account settings</button><div class="scr"></div><section class="sh" data-i="0" role="dialog" aria-modal="true" aria-labelledby="uvq13-stk-0"><i class="gr" aria-hidden="true"></i><header><span></span><b id="uvq13-stk-0">Account settings</b><button type="button" class="x" aria-label="Close"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></header><button type="button" class="row" data-to="1"><i class="ic" style="--c:#0ea5e9"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z"/></svg></i><span>Privacy</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button><button type="button" class="row"><i class="ic" style="--c:#f43f5e"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9.5a6 6 0 0 1 12 0c0 4.5 2 6 2 6H4s2-1.5 2-6M10 19a2 2 0 0 0 4 0"/></svg></i><span>Notifications</span><em>On</em></button><button type="button" class="row"><i class="ic" style="--c:#8b5cf6"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17M12 3.5c2.5 2.6 3.5 5.4 3.5 8.5s-1 5.9-3.5 8.5c-2.5-2.6-3.5-5.4-3.5-8.5s1-5.9 3.5-8.5"/></svg></i><span>Language</span><em>Spanish</em></button></section><section class="sh" data-i="1" role="dialog" aria-modal="true" aria-labelledby="uvq13-stk-1"><i class="gr" aria-hidden="true"></i><header><button type="button" class="bk" aria-label="Back"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg></button><b id="uvq13-stk-1">Privacy</b><span></span></header><label class="row"><span>Private profile</span><input type="checkbox" role="switch" class="sw"></label><button type="button" class="row" data-to="2"><span>Blocked accounts</span><em>2</em><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button><p class="nt">If your profile is private, only your followers will see what you post.</p></section><section class="sh" data-i="2" role="dialog" aria-modal="true" aria-labelledby="uvq13-stk-2"><i class="gr" aria-hidden="true"></i><header><button type="button" class="bk" aria-label="Back"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg></button><b id="uvq13-stk-2">Blocked accounts</b><span></span></header><ul><li><span class="av" style="--c:#f97316">R</span><span class="nm">rober_88</span><button type="button" class="ub"><span class="a">Unblock</span><span class="b">Block</span></button></li><li><span class="av" style="--c:#6366f1">N</span><span class="nm">nube.gris</span><button type="button" class="ub"><span class="a">Unblock</span><span class="b">Block</span></button></li></ul></section></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 Overlays
See all OverlaysWhere to use it
Settings often go two or three levels deep, and stacked sheets keep that path visible. Each new sheet slides up while the previous one scales back, lifts a little and dims, so you can see how deep you are. Back buttons and Escape peel off one layer at a time and focus returns to the row that opened it. It suits settings, checkout steps and filters.
The main color fills the switch and the unblock buttons, and the text field names the first sheet. Add rows with data-to pointing at the next sheet, and the depth rules scale every layer for you.