Componente de mensajes de error
Componente de mensajes de error con diseño 3D, combinación de colores monocromática, complejidad moderada para el propósito del tablero, diseño receptivo con soporte de tema oscuro.
Código HTML
<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
<div class="relative">
<div class="absolute inset-0 bg-gradient-to-r from-purple-400 to-purple-600 transform -skew-y-3 rotate-1 scross-y-3 rounded-3xl dark:from-purple-700 dark:to-purple-900"></div>
<div class="relative bg-white p-10 rounded-xl shadow-2xl text-center dark:bg-gray-800">
<h1 class="text-3xl font-bold text-red-500 dark:text-red-400">Error!</h1>
<p class="mt-4 text-gray-700 dark:text-gray-300">Something went wrong. Please try again later.</p>
<button class="mt-6 px-8 py-2 bg-purple-500 text-white rounded-full hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-700">Retry</button>
</div>
</div>
</div>Componentes relacionados
Componente de mensajes de error
Un componente de mensajes de error diseñado con estilo brutalismo, utilizando un esquema de color análogo, para una interfaz de redes sociales, con un diseño receptivo y soporte para temas oscuros.
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.
Componente de mensajes de error
Componente de mensajes de error retro/vintage con un esquema de color pastel, diseño complejo, diseño responsivo y soporte de temas oscuros utilizando Tailwind CSS.