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
Ce composant est un message d’alerte avec un design minimaliste/plat, une palette de couleurs de tons de terre et une mise en page complexe. Il est conçu pour les interfaces de médias sociaux et est réactif avec la prise en charge du thème sombre. Il utilise Tailwind CSS pour le style et comprend plusieurs éléments interactifs.
Composant Messages d’alerte
Un composant de message d’alerte au design rétro/vintage, incluant la prise en charge du mode sombre et de 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.