Pulsa una nota para fijarla
Sticky notes pinned to cork
Loose notes on a corkboard: press one and a pushpin drops in, the note straightens and sticks; unpin it and it swings.
Settings
Code
<div class="uvq15-pin"><div class="bd"><button type="button" class="nt" style="--c:var(--c2);--r:-5deg" aria-pressed="false"><span class="pn" aria-hidden="true"></span><span class="tx">Buy bread and coffee</span></button><button type="button" class="nt" style="--c:#fbcfe8;--r:4deg" aria-pressed="false"><span class="pn" aria-hidden="true"></span><span class="tx">Call Ana at 5</span></button><button type="button" class="nt" style="--c:#bbf7d0;--r:-2deg" aria-pressed="false"><span class="pn" aria-hidden="true"></span><span class="tx">Logo ideas</span></button></div><p class="hd">Press a note to pin it</p></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 Microinteractions
See all MicrointeractionsWhere to use it
Pinning is a common action in boards, notes apps and dashboards, and this block shows it with a real corkboard. Loose notes hang slightly tilted with a deep shadow; pressing one drops a red pushpin from above, the note straightens and flattens against the cork. Pressing again pops the pin out and the note swings for a moment before settling.
The main color tints the pin head and the secondary one the first note, while the other two keep pink and mint. Each note is a toggle button with aria-pressed, so screen readers hear whether it is pinned. The handwriting uses system fonts only.