Composant Messages d’erreur
Un composant de messages d’erreur de style glassmorphism pour un tableau de bord, avec un effet de verre givré, des couleurs complémentaires et un design interactif complexe adapté à la visualisation de données et aux panneaux de contrôle.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 p-6 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-700 backdrop-blur-md bg-opacity-30 border border-gray-300 dark:border-gray-600 rounded-lg p-6 shadow-lg w-full max-w-md">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Error Messages</h2>
<div class="bg-red-500 text-white p-4 rounded-lg mb-4 flex items-center">
<div class="flex-shrink-0">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
</div>
<div class="ml-3">
<p class="font-semibold">Network Error:</p>
<p>There was a problem connecting to the server. Please try again later.</p>
</div>
</div>
<div class="bg-yellow-500 text-white p-4 rounded-lg mb-4 flex items-center">
<div class="flex-shrink-0">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
</div>
<div class="ml-3">
<p class="font-semibold">Warning:</p>
<p>Your session will expire in 5 minutes.</p>
</div>
</div>
<div class="bg-green-500 text-white p-4 rounded-lg flex items-center">
<div class="flex-shrink-0">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
</div>
<div class="ml-3">
<p class="font-semibold">Success:</p>
<p>Your changes have been saved successfully!</p>
</div>
</div>
</div>
</div>Composants associés
Memphis_Monochromatic_Error_Message
Un composant de message d’erreur simple et monochromatique avec une influence du design de Memphis, adapté aux sites Web d’événements/conférences. Présente des formes audacieuses et une mise en page réactive 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.
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.