Pulsa una nota para fijarla
Notas que se fijan con chincheta
Notas sueltas sobre un corcho: al pulsar una, cae una chincheta, la nota se endereza y se pega; al soltarla, se balancea.
Ajustes
Código
<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">Comprar pan y café</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">Llamar a Ana a las 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">Ideas para el logo</span></button></div><p class="hd">Pulsa una nota para fijarla</p></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Microinteracciones
Ver todos: MicrointeraccionesDónde usarlo
Fijar es una acción habitual en tableros, apps de notas y paneles, y este bloque la muestra con un corcho de verdad. Las notas sueltas cuelgan algo torcidas y con una sombra profunda; al pulsar una, una chincheta roja cae desde arriba y la nota se endereza y se pega al corcho. Si pulsas otra vez, la chincheta salta y la nota se balancea antes de quedarse quieta.
El color principal tiñe la cabeza de la chincheta y el secundario la primera nota, y las otras dos son rosa y menta. Cada nota es un botón con aria-pressed, así que el lector de pantalla dice si está fijada. La letra manuscrita usa solo fuentes del sistema.