Composant Messages d’alerte
Un composant de messages d’alerte de style brutaliste avec une palette de couleurs pastel, conçu pour les sites Web d’entreprise et réactif avec la prise en charge du thème sombre.
HTML Code
<div class="flex flex-col space-y-4 p-6 bg-white text-black dark:bg-gray-800 dark:text-white">
<!-- Alert Message Header -->
<h2 class="text-2xl font-bold">Alert Messages</h2>
<!-- Alert Message Item -->
<div class="flex items-center p-4 bg-pink-100 border-l-4 border-pink-500 dark:bg-pink-800 dark:border-pink-400">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="flex flex-col">
<span class="font-semibold">John Doe</span>
<p>This is an informational alert message to notify you about updates.</p>
</div>
</div>
<!-- Alert Message Item -->
<div class="flex items-center p-4 bg-yellow-100 border-l-4 border-yellow-500 dark:bg-yellow-800 dark:border-yellow-400">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
<div class="flex flex-col">
<span class="font-semibold">Jane Smith</span>
<p>This is a warning alert message to notify you about potential issues.</p>
</div>
</div>
<!-- Alert Message Item -->
<div class="flex items-center p-4 bg-green-100 border-l-4 border-green-500 dark:bg-green-800 dark:border-green-400">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
<div class="flex flex-col">
<span class="font-semibold">Alex Johnson</span>
<p>This is a success alert message to confirm your action.</p>
</div>
</div>
</div>Composants associés
Message d’alerte Glassmorphism
Composant réactif Glassmorphism Alert Message pour un site de commerce électronique, avec prise en charge du mode sombre et un schéma de couleurs analogue, construit avec Tailwind CSS.
Composant Messages d’alerte de la Place de marché
Un composant de messages d’alerte inspiré du Material Design avec des couleurs d’automne, adapté aux plateformes de marché. Dispose de différents types d’alertes (succès, avertissement, erreur, info) avec des options de rejet et la 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.