Composant Messages d’erreur
Un composant de messages d’erreur minimaliste conçu à l’aide de Tailwind CSS, avec des effets réactifs et une prise en charge du thème sombre.
HTML Code
<div class="max-w-md mx-auto mt-8 p-4 bg-white shadow-md rounded-lg dark:bg-gray-800">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
<h2 class="ml-3 text-xl font-semibold text-gray-900 dark:text-white">Error Title</h2>
</div>
<p class="text-gray-700 dark:text-gray-300">This is an error message that summarizes the issue. Please check the details and try again.</p>
<div class="mt-4">
<img src="https://picsum.photos/400/200" alt="Error Illustration" class="w-full h-auto rounded-md">
</div>
<div class="mt-4 flex justify-between">
<button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">
Retry
</button>
<button class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700">
Dismiss
</button>
</div>
</div>Composants associés
Composant Messages d’erreur
Un composant réactif de messages d’erreur utilisant les principes de Material Design, avec une palette de couleurs triadique et la prise en charge du mode sombre, adapté à un portefeuille.
Composant Messages d’erreur
Composant réactif de messages d’erreur conçu avec un style 3D et une palette de couleurs monochromatiques. Convient à un portfolio, avec des éléments interactifs pour l’engagement de l’utilisateur.
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.