Componente de mensajes de error
Un componente de mensaje de error simple, limpio y receptivo con un estilo de tipografía suizo/internacional y una combinación de colores océano/azul, adecuado para sitios web de entrega de alimentos y restaurantes. Incluye soporte para modo oscuro.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-sky-50 dark:bg-gray-900 p-4 font-sans">
<div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 md:p-8 border-t-4 border-blue-600 dark:border-blue-500 transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
<div class="flex items-center space-x-4 mb-5">
<svg class="h-10 w-10 text-blue-600 dark:text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<h2 class="text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-white capitalize tracking-tight">
Oops! Order Failed
</h2>
</div>
<p class="text-base md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
We're sorry, but there was an issue processing your order. Please review the details below or try again.
</p>
<ul class="list-none p-0 space-y-3 mb-8">
<li class="flex items-start text-gray-800 dark:text-gray-200">
<svg class="h-5 w-5 text-red-500 mr-2 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
</svg>
<span class="text-sm md:text-base">Payment authorization failed. Your bank might have declined the transaction.</span>
</li>
<li class="flex items-start text-gray-800 dark:text-gray-200">
<svg class="h-5 w-5 text-red-500 mr-2 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
</svg>
<span class="text-sm md:text-base">Item quantity exceeded restaurant stock for some items.</span>
</li>
</ul>
<div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
<button type="button" class="flex-1 inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out transform hover:scale-[1.02]">
<svg class="-ml-1 mr-2 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 10.59V10m5.72-.94l-2.67 2.67m0 0l2.67 2.67m-2.67-2.67H7.72" />
</svg>
Retry Order
</button>
<button type="button" class="flex-1 inline-flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-600 text-base font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300 transition duration-150 ease-in-out transform hover:scale-[1.02]">
<svg class="-ml-1 mr-2 h-5 w-5 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-9 2v4a1 1 0 001 1h3" />
</svg>
Back to Home
</button>
</div>
</div>
</div>Componentes relacionados
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.
Componente de mensajes de error
Un componente de mensajes de error responsivo diseñado en un estilo brutalista con Tailwind CSS, con alto contraste, diseños inusuales y compatibilidad con el modo oscuro.
Retro_Vintage_Error_Message_Rainbow_Gradient
Un componente de mensaje de error complejo, de temática retro / vintage para plataformas educativas, con un fondo degradado de arco iris y estética de los años 80 / 90, totalmente receptivo con soporte para modo oscuro.