RetroReservationErrorMessage
Un composant de message d’erreur simple, de style rétro/vintage pour les systèmes de réservation, avec des couleurs à contraste élevé et une réactivité totale avec prise en charge du mode sombre.
HTML Code
<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>Composants associés
Composant Messages d’erreur
Composant de messages d’erreur avec conception 3D, schéma de couleurs monochromatique, complexité modérée pour le tableau de bord, conception réactive avec prise en charge du thème sombre.
Composant Messages d’erreur
Composant réactif de messages d’erreur conçu pour le mode sombre avec une palette de couleurs monochromatiques. Il est destiné à un tableau de bord permettant de visualiser les erreurs ou les avertissements, avec des éléments interactifs tels que des boutons de fermeture et des icônes d’erreur.
Composant Messages d’erreur
Un composant de messages d’erreur conçu avec le style Brutalism, en utilisant une palette de couleurs analogue, pour une interface de médias sociaux, avec un design réactif et une prise en charge du thème sombre.