Сообщение об ошибке «Минималистичные оттенки серого»
Минималистичный и отзывчивый компонент сообщения об ошибке в оттенках серого, предназначенный для спортивных и фитнес-приложений, с поддержкой темного режима.
HTML-код
<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>
Связанные компоненты
Компонент игривой осенней ошибки
Игривый и веселый компонент с сообщением об ошибке, разработанный в осенних цветах, округлой эстетике и поддержке темного режима, подходит для документации или вики-сайтов.
Компонент "Сообщения об ошибках"
Простой, понятный и отзывчивый компонент с сообщением об ошибке в швейцарском/международном стиле типографики и океанско-синей цветовой гамме, подходящий для сайтов доставки еды и ресторанов. Включает поддержку темного режима.
Компонент сообщения об ошибке
Доработан компонент сообщения об ошибке с использованием скевоморфизма, триадической цветовой схемы и простой верстки. Создан с использованием Tailwind CSS для отзывчивости и поддержки темного режима. Нет JavaScript.