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.
Código HTML
<div class="max-w-md mx-auto p-6 bg-gradient-to-br from-red-500 via-black-500 to-blue-500 text-white font-sans rounded-lg shadow-lg dark:from-red-700 dark:via-black-700 dark:to-blue-700">
<div class="flex items-center space-x-4">
<svg class="h-8 w-8 text-white" 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.34 16c-.77 1.333.192 3 1.732 3z"/>
</svg>
<div class="text-lg font-bold">Error</div>
</div>
<div class="mt-4 text-sm">
<p>An unexpected error occurred. Please try again later.</p>
</div>
</div>Componentes relacionados
Mensajes de error Componente 45
Un componente de mensajes de error de estilo Retro/Vintage con efectos responsivos y compatibilidad con temas oscuros, utilizando Tailwind CSS.
Componente de mensajes de error
Un componente de mensajes de error responsivo diseñado en un estilo brutalista con Tailwind CSS, con alto contraste, diseños inusuales y compatibilidad con el modo oscuro.
Componente de mensajes de error
Un componente de mensajes de error con estilo glassmorphism para un tablero, con un efecto de vidrio esmerilado, colores complementarios y un diseño interactivo complejo adecuado para la visualización de datos y los paneles de control.