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
Mensajes de error Componente 45
Un componente de mensajes de error de estilo Retro/Vintage con efectos responsivos y compatibilidad con temas oscuros, utilizando Tailwind CSS.
Componente de mensaje de error
Componente de mensaje de error refinado con skeuomorfismo, combinación de colores triádica y un diseño sencillo. Diseñado con Tailwind CSS para mayor capacidad de respuesta y compatibilidad con el modo oscuro. Sin JavaScript.
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.