Informe de campo
El día 14 el equipo llegó a a las . El contacto, conocido como , entregó y se marchó en un .
HTML + CSSTexto y scroll
Informe con datos tachados
Un expediente mecanografiado con barras negras de censura que se retiran una a una al pulsarlas, o todas a la vez.
Ajustes
16px
1x
Código
<article class="uvq14-red"><header><span class="cl">Confidencial</span><span>Exp. 27/B</span></header><h3>Informe de campo</h3><p>El día 14 el equipo llegó a <button type="button" class="rd" aria-pressed="false">Valdeluz</button> a las <button type="button" class="rd" aria-pressed="false">06:40</button>. El contacto, conocido como <button type="button" class="rd" aria-pressed="false">la Bibliotecaria</button>, entregó <button type="button" class="rd" aria-pressed="false">tres sobres sellados</button> y se marchó en un <button type="button" class="rd" aria-pressed="false">Seat 600 azul</button>.</p><footer><button type="button" class="all" aria-pressed="false">Desclasificar todo</button><span class="sg">Firma: ilegible</span></footer></article>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 Texto y scroll
Ver todos: Texto y scrollDónde usarlo
Las barras negras de censura hacen que cualquier texto parezca un secreto que merece la pena leer. En este informe cada barra es un botón real sobre las palabras ocultas, así que el teclado y los lectores de pantalla llegan a ellas, y un recorte irregular da a los trazos bordes de rotulador. Sirve para campañas de misterio, casos de estudio o presentaciones de producto.
Cambia las frases ocultas por las tuyas, el color del sello con el color principal y el de las barras con el secundario. El botón de desclasificar lo revela todo en cadena y puede volver a taparlo, y cada barra guarda su propio estado.