Mensaje de error de escala de grises minimalista
Un componente de mensaje de error en escala de grises minimalista y receptivo diseñado para aplicaciones deportivas/de fitness, con soporte para modo oscuro.
Código 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>Componentes relacionados
Componente de mensajes de error
Este componente muestra mensajes de error con animaciones atractivas que responden a las acciones del usuario. Incluye soporte para el modo oscuro y presenta efectos responsivos usando Tailwind CSS.
Componente de mensajes de error
Un componente de mensajes de error responsivo que utiliza los principios de Material Design, con un esquema de color triádico y compatibilidad con el modo oscuro, adaptado a una cartera.
Componente de mensajes de error
Un componente de mensajes de error de estilo glassmorphism con un tema oscuro para uso empresarial. Utiliza Tailwind CSS para diseñar con diseño responsivo y elementos interactivos.