Composant Messages d’erreur
Composant réactif de messages d’erreur conçu pour le mode sombre avec une palette de couleurs monochromatiques. Il est destiné à un tableau de bord permettant de visualiser les erreurs ou les avertissements, avec des éléments interactifs tels que des boutons de fermeture et des icônes d’erreur.
HTML Code
<div class="bg-gray-800 text-gray-200 p-4 rounded-lg space-y-4">
<h2 class="text-xl font-semibold mb-2">Error Messages</h2>
<div class="flex items-start bg-gray-700 p-3 rounded-md">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
<div class="flex-1">
<p class="font-medium">Error Title: Unable to load data</p>
<p class="text-gray-400">Details: The data could not be retrieved at this time. Please try again later.</p>
<button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
</div>
</div>
<div class="flex items-start bg-gray-700 p-3 rounded-md">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
<div class="flex-1">
<p class="font-medium">Error Title: Network issue</p>
<p class="text-gray-400">Details: Please check your internet connection and try again.</p>
<button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
</div>
</div>
<div class="flex items-start bg-gray-700 p-3 rounded-md">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
<div class="flex-1">
<p class="font-medium">Error Title: Database connection failed</p>
<p class="text-gray-400">Details: The application is unable to connect to the database server.</p>
<button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
</div>
</div>
<div class="flex items-start bg-gray-700 p-3 rounded-md">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
<div class="flex-1">
<p class="font-medium">Error Title: Unexpected error occurred</p>
<p class="text-gray-400">Details: Please refresh the page or contact support.</p>
<button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
</div>
</div>
<div class="flex items-start bg-gray-700 p-3 rounded-md">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
<div class="flex-1">
<p class="font-medium">Error Title: Authentication failed</p>
<p class="text-gray-400">Details: Invalid username or password. Please try again.</p>
<button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
</div>
</div>
</div>Composants associés
Composant Messages d’erreur
Un composant de message d’erreur réactif avec des dégradés de tons de terre, des transitions douces et une prise en charge du mode sombre, adapté aux sites Web de conseil/services.
Luxury_Premium_Healthcare_Error_Message
Un composant de message d’erreur de style luxe/premium pour les applications de santé, doté d’une typographie sophistiquée, d’une palette de couleurs à contraste élevé et d’une réactivité totale avec prise en charge du mode sombre.
RetroReservationErrorMessage
Un composant de message d’erreur simple, de style rétro/vintage pour les systèmes de réservation, avec des couleurs à contraste élevé et une réactivité totale avec prise en charge du mode sombre.