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.
HTML Code
<div class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-900 rounded-md shadow-lg max-w-md mx-auto mt-6">
<div class="flex justify-between items-center w-full">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Alert Title</h2>
<button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none">
×
</button>
</div>
<p class="mt-2 text-gray-600 dark:text-gray-400">
This is a minimal alert message for your blog or content. It is meant to grab the reader's attention without being intrusive.
</p>
<div class="flex items-center mt-3">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-300 text-sm">Posted by John Doe</span>
</div>
<div class="flex justify-end mt-4">
<button class="px-4 py-2 bg-gray-800 text-white rounded-md hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">
Action
</button>
</div>
</div>Composants associés
Composant Messages d’alerte
Un composant simple de message d’alerte de style Neumorphism pour les sites Web d’entreprise, avec des couleurs vives et une prise en charge réactive du thème sombre à l’aide de Tailwind CSS et sans JavaScript.
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.
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.