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
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.
Composant Messages d’alerte
Un composant de message d’alerte minimaliste conçu pour les blogs, avec une palette de couleurs en niveaux de gris. Il comprend un titre, un message et un bouton de fermeture. Conception réactive avec prise en charge du thème sombre.
Composant Messages d’alerte
Un composant de messages d’alerte avec une conception 3D, des fonctionnalités réactives et une prise en charge du thème sombre à l’aide de Tailwind CSS. Le composant comprend différents types d’alertes (succès, erreur, avertissement, infos) avec des icônes et des messages.