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
Composant Messages d’erreur
Un composant de messages d’erreur conçu avec le style Brutalism, en utilisant une palette de couleurs analogue, pour une interface de médias sociaux, avec un design réactif et une prise en charge du thème sombre.
Composant Messages d’erreur
Composant de messages d’erreur avec conception 3D, schéma de couleurs monochromatique, complexité modérée pour le tableau de bord, conception réactive avec prise en charge du thème 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.