Componente de mensajes de error
Un componente de mensaje de error con un diseño esqueuomórfico, con un icono de alerta realista y un borde sombreado. Admite diseños responsivos e incluye distintos estilos para el modo oscuro, lo que garantiza la legibilidad y una apariencia visualmente apropiada en diferentes temas.
Código HTML
<div class="rounded-lg shadow-lg bg-gradient-to-br from-red-500 to-red-700 p-6 max-w-sm mx-auto mt-10 relative overflow-hidden dark:from-gray-700 dark:to-gray-900">
<div class="absolute top-0 left-0 w-full h-full pointer-events-none" style="background: radial-gradient(circle at top left, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%);"></div>
<div class="flex items-center space-x-4">
<div class="flex-shrink-0">
<!-- Skeuomorphic Error Icon -->
<svg class="h-8 w-8 text-white filter drop-shadow-md dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.306 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<div>
<h3 class="text-lg leading-6 font-medium text-white drop-shadow dark:text-red-50">
Error Occurred
</h3>
<p class="mt-2 text-sm text-red-100 dark:text-red-200">
An unexpected error has occurred. Please try again later.
</p>
</div>
</div>
</div>Componentes relacionados
Componente de mensajes de error - Comida/Restaurante
Un componente de mensaje de error triádico complejo, inspirado en papel e impresión para sitios web de alimentos y restaurantes, con soporte para modo oscuro y capacidad de respuesta completa. Cuenta con múltiples elementos interactivos que simulan una impresión física.
Componente de mensajes de error
Este componente muestra mensajes de error con animaciones atractivas que responden a las acciones del usuario. Incluye soporte para el modo oscuro y presenta efectos responsivos usando Tailwind CSS.
Componente de mensaje de error
Componente de mensaje de error refinado con skeuomorfismo, combinación de colores triádica y un diseño sencillo. Diseñado con Tailwind CSS para mayor capacidad de respuesta y compatibilidad con el modo oscuro. Sin JavaScript.