Composant Messages d’alerte
Un composant de messages d’alerte de style Glassmorphism pour la visualisation des données du tableau de bord, avec des effets de verre givré, des couleurs complémentaires et un design réactif avec prise en charge du thème sombre.
HTML Code
<div class="flex flex-col space-y-4 p-6">
<div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
<div class="flex-1">
<p class="text-lg font-semibold text-black dark:text-white">Alert Title</p>
<p class="text-gray-700 dark:text-gray-300">This is an alert message describing the issue at hand.</p>
</div>
<button class="bg-red-600 text-white p-2 rounded-md hover:bg-red-500 dark:bg-red-700 dark:hover:bg-red-600">Dismiss</button>
</div>
</div>
<div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
<div class="flex-1">
<p class="text-lg font-semibold text-black dark:text-white">Information Alert</p>
<p class="text-gray-700 dark:text-gray-300">This is a piece of information to keep you updated.</p>
</div>
<button class="bg-blue-600 text-white p-2 rounded-md hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">Okay</button>
</div>
</div>
<div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
<div class="flex-1">
<p class="text-lg font-semibold text-black dark:text-white">Success Alert</p>
<p class="text-gray-700 dark:text-gray-300">Your operation was successful! Great job!</p>
</div>
<button class="bg-green-600 text-white p-2 rounded-md hover:bg-green-500 dark:bg-green-700 dark:hover:bg-green-600">Close</button>
</div>
</div>
</div>Composants associés
Composant Messages d’alerte
Un composant de message d’alerte simple et monochrome pour les blogs avec des animations axées sur la micro-interaction, la prise en charge du mode sombre et la réactivité.
Composant Messages d’alerte
Un composant de message d’alerte de style rétro/vintage pour les sites Web d’entreprise/d’entreprise, avec des tons de terre et un design réactif avec prise en charge du mode sombre.
Composant Messages d’alerte
Un composant de messages d’alerte réactif conçu dans un style minimaliste/plat avec une palette de couleurs pastel, adapté aux interfaces de médias sociaux, intégrant la prise en charge du thème sombre.