HTML + CSSToasts

Toast de temporizador de cocina

Un despertador de campanas tiembla cuando se acaba el tiempo y deja posponer cinco minutos más o pararlo.

Ajustes

16px
1x

Código

<div class="uvq09-ktm"><button type="button" class="fire">Mostrar de nuevo</button><div class="tt" role="alert"><span class="ck" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path class="bel" d="M3.4 8.4a3.7 3.7 0 0 1 5.2-5.2zM20.6 8.4a3.7 3.7 0 0 0-5.2-5.2z"/><circle class="fc" cx="12" cy="13.5" r="6.6"/><path d="M12 10.3v3.3l2.2 1.5M7.6 19.6l-1.6 2M16.4 19.6l1.6 2"/><path class="wv" d="M1.8 12c-.6 1.3-.6 2.7 0 4M22.2 12c.6 1.3.6 2.7 0 4"/></svg></span><span class="tx"><b>La pasta está lista</b><small class="m1">Temporizador de 9 minutos</small><small class="m2">Te aviso en 5 minutos</small></span><span class="ac"><button type="button" class="sn">+5 min</button><button type="button" class="st">Parar</button></span></div></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.

Versión Markdown con todo el código, para asistentes de IA

Más en Toasts

Ver todos: Toasts

Dónde usarlo

Un despertador de dos campanas dice que se acabó el tiempo antes de leer nada. Este toast sacude el reloj a ráfagas con ondas de sonido a los lados, va sobre una tarjeta de esmalte verde menta como un electrodoméstico antiguo y ofrece dos opciones claras: cinco minutos más o parar. Usa role alert y encaja en apps de recetas, temporizadores de cocina, entrenamientos y herramientas de concentración.

El color principal es el reloj y el botón Parar; el secundario es la tarjeta esmaltada. Posponer cambia el subtítulo y cierra el toast al momento, así que conéctalo con el temporizador de tu app para reiniciar la cuenta atrás.