Minimalist Grayscale Error Message
A minimalist and responsive grayscale error message component designed for sports/fitness applications, with dark mode support.
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>
Related Components
Error Messages Component
This component displays error messages with engaging animations that respond to user actions. It includes support for dark mode and features responsive effects using Tailwind CSS.
Luxury_Premium_Healthcare_Error_Message
A luxury/premium style error message component for healthcare applications, featuring sophisticated typography, a high-contrast color scheme, and full responsiveness with dark mode support.
Error Messages Component
Error Messages Component for social media with dark mode support using Tailwind CSS.