Toast de cita en calendario

Confirma una cita con la fecha en un recuadro, la franja horaria y una barra de color que crece al lado.

Ajustes

Color principal#0071e3

Color secundario#8ec5ff

Tamaño16px

Velocidad1x

Texto

Código

index.html

<div class="uv-zcal"><button class="fire">Crear evento</button><div class="toast"><time><b>25</b>SEP</time><span><b>Revisión de diseño</b><small>16:30–17:15 · Estudio</small></span><i></i></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

Toast animado

ToastsReact + Motion

Toast de éxito elástico

ToastsHTML + CSS

Toast con deshacer

ToastsHTML + CSS

Toast de progreso de subida

ToastsHTML + CSS

Toast de error con sacudida

ToastsHTML + CSS

Toast de mensaje entrante

ToastsHTML + CSS

Toasts apilados

ToastsHTML + CSS

Toast píldora tipo isla

ToastsHTML + CSS

Dónde usarlo

Pensado para el momento en que una fecha queda cerrada. Cuando un cliente reserva un corte en la web de una peluquería, o un paciente elige hora con el dentista, el toast de calendario enseña el día, la franja y el sitio de un vistazo. Funciona como un pequeño resguardo de que la reserva ha entrado.

Incluye siempre la hora y el lugar; la fecha sola no sirve de mucho. Añade un enlace «Añadir al calendario» si la gente lo va a necesitar luego. Y usa el color de tu marca en la barra lateral para que se reconozca como tuyo.