Messages d’erreur Composant 45
Un composant de messages d’erreur de style rétro/vintage avec des effets réactifs et la prise en charge des thèmes sombres, à l’aide de Tailwind CSS.
HTML Code
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-700 p-6 mt-5 shadow-lg">
<div class="flex items-center space-x-3">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/41.jpg" alt="User Avatar">
<div class="flex-1">
<h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Error Title</h2>
<p class="text-sm text-gray-600 dark:text-gray-400">This is a descriptive message about the error that occurred. Please take the necessary action to fix it. Thank you.</p>
</div>
</div>
<div class="mt-4 flex space-x-4">
<button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-200">Retry</button>
<button class="bg-red-500 text-white font-semibold py-2 px-4 rounded-lg hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-600 transition duration-200">Cancel</button>
</div>
<div class="mt-4">
<img class="rounded-lg" src="https://picsum.photos/300/200?random=1" alt="Error Illustration">
</div>
</div>Composants associés
Composant Messages d’erreur
Un composant de messages d’erreur de style glassmorphism avec un thème sombre pour une utilisation professionnelle. Il utilise Tailwind CSS pour le style avec un design réactif et des éléments interactifs.
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.