Componente de mensajes de error
Componente de mensajes de error para redes sociales con soporte de modo oscuro usando Tailwind CSS.
Código HTML
<div class="flex items-center justify-center h-screen bg-gray-900">
<div class="bg-gray-800 p-8 rounded-lg shadow-lg max-w-md w-full">
<div class="flex items-center justify-between mb-4">
<h2 class="text-2xl font-bold text-white">Error</h2>
<button class="text-gray-400 hover:text-white focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="text-gray-300 mb-6">
<p>Oops! Something went wrong. Please try again later.</p>
<ul class="mt-4 list-disc list-inside">
<li>Check your internet connection.</li>
<li>Ensure you have the latest version of the app.</li>
<li>Contact support if the issue persists.</li>
</ul>
</div>
<div class="flex justify-end">
<button class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
Got it
</button>
</div>
</div>
</div>Componentes relacionados
Componente de mensajes de error
Un componente de mensajes de error interactivo diseñado con un estilo 3D y una combinación de colores monocromática. Adecuado para un portafolio, con elementos interactivos para la participación del usuario.
Componente de mensajes de error
Un componente de mensajes de error responsivo que utiliza los principios de Material Design, con un esquema de color triádico y compatibilidad con el modo oscuro, adaptado a una cartera.
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.