Componente de mensajes de error
Un componente de mensajes de error responsivos que presenta animaciones atractivas para las interacciones del usuario y admite el tema oscuro mediante Tailwind CSS.
Código HTML
<div class="max-w-lg mx-auto p-4">
<!-- Error Message Card -->
<div class="bg-white dark:bg-gray-800 border border-red-500 rounded-lg shadow-md p-4 transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
<!-- Error Icon -->
<div class="flex items-center mb-2">
<img src="https://picsum.photos/40/40?random=1" alt="Error Icon" class="w-10 h-10 mr-2 rounded-full" />
<h2 class="text-lg font-semibold text-red-600 dark:text-red-400">Error Title</h2>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4">This is a descriptive error message that provides more detail about the issue.</p>
<button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-opacity-50">
Close
</button>
</div>
<!-- Example of Multiple Error Messages -->
<div class="mt-4 space-y-4">
<div class="bg-white dark:bg-gray-800 border border-red-500 rounded-lg shadow-md p-4 transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 mr-2 rounded-full" />
<h2 class="text-lg font-semibold text-red-600 dark:text-red-400">User Not Found</h2>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4">The user you are looking for might have been removed.</p>
<button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-opacity-50">
Retry
</button>
</div>
<div class="bg-white dark:bg-gray-800 border border-red-500 rounded-lg shadow-md p-4 transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 mr-2 rounded-full" />
<h2 class="text-lg font-semibold text-red-600 dark:text-red-400">Network Error</h2>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4">There seems to be a network issue, please check your connection.</p>
<button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-opacity-50">
Reload
</button>
</div>
</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 mensajes de error receptivo diseñado para interfaces de redes sociales, que utiliza un modo oscuro y un esquema de color en escala de grises con Tailwind CSS.
Componente de mensajes de error
Componente de mensajes de error para redes sociales con soporte de modo oscuro usando Tailwind CSS.