RetroReservationErrorMessage
Un componente de mensaje de error simple, de estilo retro / vintage para sistemas de reserva / reserva, con colores de alto contraste y capacidad de respuesta total con soporte para modo oscuro.
Código HTML
<div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 font-mono">
<div class="max-w-md w-full p-6 sm:p-8 rounded-lg shadow-xl border-4 border-red-500 bg-white dark:bg-gray-700 transform transition-all duration-300 hover:scale-105">
<div class="flex items-center justify-center mb-6">
<svg class="h-12 w-12 text-red-500 mr-3 animate-pulse" 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>
<h2 class="text-3xl font-extrabold text-red-600 dark:text-red-400 uppercase tracking-wider">Error!</h2>
</div>
<p class="text-center text-lg text-gray-800 dark:text-gray-200 mb-6 leading-relaxed">
<span class="block font-bold mb-2">Booking Failed.</span>
It looks like there was an issue with your reservation.
</p>
<ul class="list-none p-0 mb-6 space-y-2 text-gray-700 dark:text-gray-300">
<li class="flex items-center text-md">
<span class="text-red-500 mr-2 text-xl">›</span> The selected time slot is no longer available.
</li>
<li class="flex items-center text-md">
<span class="text-red-500 mr-2 text-xl">›</span> Please check your internet connection and try again.
</li>
<li class="flex items-center text-md">
<span class="text-red-500 mr-2 text-xl">›</span> Contact support if the issue persists.
</li>
</ul>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<button class="flex-1 w-full sm:w-auto px-6 py-3 bg-red-600 text-white font-bold rounded-md uppercase text-lg tracking-wide shadow-lg transform transition-all duration-200 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75">
Try Again
</button>
<button class="flex-1 w-full sm:w-auto px-6 py-3 bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-gray-200 font-bold rounded-md uppercase text-lg tracking-wide shadow-lg transform transition-all duration-200 hover:bg-gray-400 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-opacity-75">
Go Back
</button>
</div>
<div class="mt-8 text-center text-sm text-gray-500 dark:text-gray-400">
Error Code: BK-RSV-001 | Date: 2023-10-27
</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 que utiliza los principios de Material Design, con un esquema de color triádico y compatibilidad con el modo oscuro, adaptado a una cartera.
Memphis_Monochromatic_Error_Message
Un componente de mensaje de error simple y monocromático con una influencia de diseño de Memphis, adecuado para sitios web de eventos/conferencias. Presenta formas audaces y un diseño receptivo con soporte para modo oscuro.