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 - Rencontres/Réseaux sociaux - Sépia foncé
Un composant de message d’erreur complexe conçu pour les plateformes de rencontres/sociales, doté d’un schéma de couleurs sépia foncé, d’une réactivité totale et d’une prise en charge du mode sombre pour réduire la fatigue oculaire.
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.
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.