Componente de mensajes de error
Skeuomorfismo, esquema de color triádico, componente complejo de mensajes de error de comercio electrónico con diseño receptivo y soporte de modo oscuro.
Código HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-800 flex items-center justify-center p-4">
<div class="max-w-sm mx-auto bg-white dark:bg-gray-700 shadow-2xl rounded-lg overflow-hidden">
<div class="p-6">
<div class="text-center">
<svg
class="mx-auto h-16 w-16 text-red-500 dark:text-red-400"
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="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
<h3
class="mt-2 text-2xl leading-6 font-medium text-gray-900 dark:text-gray-100"
>
Order Processing Failed
</h3>
<div class="mt-2">
<p class="text-sm text-gray-500 dark:text-gray-300">
We encountered an issue while processing your order. Please try
again later or contact support.
</p>
</div>
</div>
<div class="mt-5 sm:mt-6">
<button
type="button"
class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 dark:bg-blue-500 text-base font-medium text-white hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 sm:text-sm"
>
Contact Support
</button>
</div>
</div>
<div class="border-t border-gray-200 dark:border-gray-600 px-6 py-4">
<div class="text-center">
<button
type="button"
class="text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300"
>
Dismiss
</button>
</div>
</div>
</div>
</div>
Componentes relacionados
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 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 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.