Message d’erreur minimaliste en niveaux de gris
Un composant de message d’erreur en niveaux de gris minimaliste et réactif conçu pour les applications de sport/fitness, avec prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="max-w-md w-full mx-auto p-6 md:p-8 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 text-center transition-colors duration-300 ease-in-out">
<div class="mb-6 flex justify-center text-red-500">
<svg class="h-16 w-16 md:h-20 md:w-20 stroke-current" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h2 class="text-2xl md:text-3xl font-semibold mb-3 text-gray-900 dark:text-gray-50 leading-tight">
Oops! Training Session Not Found
</h2>
<p class="text-base md:text-lg text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
It seems the workout you're looking for has been moved, deleted, or never existed.
Don't let it break your sweat, try searching again or browse our fitness library.
</p>
<div class="flex flex-col sm:flex-row justify-center gap-3">
<a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gray-800 dark:bg-gray-100 hover:bg-gray-900 dark:hover:bg-gray-200 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 dark:text-gray-900">
Go to Dashboard
</a>
<a href="#" class="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-900 dark:text-gray-100 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">
Try Again
</a>
</div>
</div>
</div>Composants associés
Composant Messages d’erreur
Ce composant affiche des messages d’erreur avec des animations attrayantes qui répondent aux actions de l’utilisateur. Il inclut la prise en charge du mode sombre et propose des effets réactifs à l’aide de Tailwind CSS.
Composant Messages d’erreur
Un composant de messages d’erreur réactif conçu dans un style brutaliste à l’aide de Tailwind CSS, avec un contraste élevé, des mises en page inhabituelles et la prise en charge du mode sombre.
Message d’erreur immobilier
Un composant de message d’erreur professionnel et propre conçu pour les plateformes immobilières, avec une palette de couleurs monochromatiques, une réactivité totale et une prise en charge du mode sombre.