Componente de mensajes de error
Un componente minimalista de mensajes de error diseñado con Tailwind CSS, con efectos responsivos y compatibilidad con temas oscuros.
Código HTML
<div class="max-w-md mx-auto mt-8 p-4 bg-white shadow-md rounded-lg dark:bg-gray-800">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
<h2 class="ml-3 text-xl font-semibold text-gray-900 dark:text-white">Error Title</h2>
</div>
<p class="text-gray-700 dark:text-gray-300">This is an error message that summarizes the issue. Please check the details and try again.</p>
<div class="mt-4">
<img src="https://picsum.photos/400/200" alt="Error Illustration" class="w-full h-auto rounded-md">
</div>
<div class="mt-4 flex justify-between">
<button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">
Retry
</button>
<button class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700">
Dismiss
</button>
</div>
</div>Componentes relacionados
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 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.
Componente de mensajes de error
Un componente de mensajes de error interactivo diseñado para el modo oscuro con un esquema de color monocromático. Está pensado para que un panel visualice errores o advertencias, con elementos interactivos como botones de descarte e iconos de error.