Componentes Mensajes de error Componente de mensajes de error

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.

Vista previa

Código HTML

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
  <div class="max-w-md w-full bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 transition duration-300 hover:shadow-xl transform hover:-translate-y-1">
    <div class="flex items-center mb-4">
      <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Error Title</h2>
    </div>
    <p class="text-gray-600 dark:text-gray-400 mb-4">
      This is an error message that explains what went wrong. Please check your input and try again.
    </p>
    <div class="flex items-center justify-between mt-4">
      <button class="px-4 py-2 bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-600 transition duration-200 dark:bg-blue-700 dark:hover:bg-blue-800">Retry</button>
      <button class="px-4 py-2 bg-red-500 text-white font-semibold rounded-md hover:bg-red-600 transition duration-200 dark:bg-red-700 dark:hover:bg-red-800">Cancel</button>
    </div>
    <img class="mt-4 w-full h-32 object-cover rounded" src="https://picsum.photos/400/200?random=1" alt="Error Illustration">
  </div>
</div>

Componentes relacionados

Mensaje de error de escala de grises minimalista

Un componente de mensaje de error en escala de grises minimalista y receptivo diseñado para aplicaciones deportivas/de fitness, con soporte para modo oscuro.

Abrir

Componente de mensajes de error

Un componente de mensajes de error de estilo glassmorphism con un tema oscuro para uso empresarial. Utiliza Tailwind CSS para diseñar con diseño responsivo y elementos interactivos.

Abrir

Componente de mensajes de error - Citas/Social - Sepia oscuro

Un componente de mensaje de error complejo diseñado para plataformas de citas/redes sociales, con un esquema de color sepia oscuro, capacidad de respuesta total y compatibilidad con modo oscuro para reducir la fatiga visual.

Abrir