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.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
<div class="max-w-md w-full bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 transition duration-300 hover:shadow-xl transform hover:-translate-y-1">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Error Title</h2>
</div>
<p class="text-gray-600 dark:text-gray-400 mb-4">
This is an error message that explains what went wrong. Please check your input and try again.
</p>
<div class="flex items-center justify-between mt-4">
<button class="px-4 py-2 bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-600 transition duration-200 dark:bg-blue-700 dark:hover:bg-blue-800">Retry</button>
<button class="px-4 py-2 bg-red-500 text-white font-semibold rounded-md hover:bg-red-600 transition duration-200 dark:bg-red-700 dark:hover:bg-red-800">Cancel</button>
</div>
<img class="mt-4 w-full h-32 object-cover rounded" src="https://picsum.photos/400/200?random=1" alt="Error Illustration">
</div>
</div>Composants associés
Composant Messages d’erreur
Un composant de message d’erreur simple, propre et réactif avec un style de typographie suisse/international et une palette de couleurs océan/bleu, adapté aux sites Web de livraison de nourriture et de restaurants. Inclut la prise en charge du mode sombre.
Composant Messages d’erreur
Schéma de couleurs triadique complexe Composant complexe de messages d’erreur de commerce électronique avec conception réactive et prise en charge du mode sombre.
Composant Messages d’erreur
Composant de message d’erreur au design skeuomorphe, doté d’une icône d’alerte réaliste et d’une bordure ombrée. Il prend en charge les mises en page réactives et comprend des styles distincts pour le mode sombre, garantissant une lisibilité et une apparence visuellement appropriée dans différents thèmes.