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.
HTML Code
<div class="max-w-md mx-auto p-4">
</div>
<div class="bg-stone-200 dark:bg-stone-800 p-4 rounded-lg shadow-md mb-4 border border-stone-300 dark:border-stone-700">
<div class="flex items-center space-x-3">
<div class="text-amber-600 dark:text-amber-400">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
</div>
<div>
<h4 class="text-stone-800 dark:text-stone-200 text-lg font-semibold">Important Update</h4>
<p class="text-stone-600 dark:text-stone-400 text-sm">Our terms of service have been updated. Please review the changes at your earliest convenience.</p>
</div>
</div>
<div class="mt-4 flex justify-end space-x-3">
<button class="px-4 py-2 bg-stone-300 dark:bg-stone-700 text-stone-800 dark:text-stone-200 rounded-md hover:bg-stone-400 dark:hover:bg-stone-600 transition duration-300">Dismiss</button>
<button class="px-4 py-2 bg-amber-600 text-white rounded-md hover:bg-amber-700 transition duration-300">Learn More</button>
</div>
</div>
<div class="bg-green-200 dark:bg-green-800 p-4 rounded-lg shadow-md mb-4 border border-green-300 dark:border-green-700">
<div class="flex items-center space-x-3">
<div class="text-green-700 dark:text-green-400">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<div>
<h4 class="text-green-800 dark:text-green-200 text-lg font-semibold">Success!</h4>
<p class="text-green-600 dark:text-green-400 text-sm">Your profile has been updated successfully.</p>
</div>
</div>
<div class="mt-4 flex justify-end">
<button class="px-4 py-2 bg-green-300 dark:bg-green-700 text-green-800 dark:text-green-200 rounded-md hover:bg-green-400 dark:hover:bg-green-600 transition duration-300">Close</button>
</div>
</div>
<div class="bg-red-200 dark:bg-red-800 p-4 rounded-lg shadow-md mb-4 border border-red-300 dark:border-red-700">
<div class="flex items-center space-x-3">
<div class="text-red-700 dark:text-red-400">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<div>
<h4 class="text-red-800 dark:text-red-200 text-lg font-semibold">Error Occurred</h4>
<p class="text-red-600 dark:text-red-400 text-sm">Failed to process your request. Please try again later.</p>
</div>
</div>
<div class="mt-4 flex justify-end">
<button class="px-4 py-2 bg-red-300 dark:bg-red-700 text-red-800 dark:text-red-200 rounded-md hover:bg-red-400 dark:hover:bg-red-600 transition duration-300">Dismiss</button>
</div>
</div>
<div class="bg-blue-200 dark:bg-blue-800 p-4 rounded-lg shadow-md mb-4 border border-blue-300 dark:border-blue-700">
<div class="flex items-center space-x-3">
<div class="text-blue-700 dark:text-blue-400">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<div>
<h4 class="text-blue-800 dark:text-blue-200 text-lg font-semibold">Information</h4>
<p class="text-blue-600 dark:text-blue-400 text-sm">You have 3 unread messages in your inbox.</p>
</div>
</div>
<div class="mt-4 flex justify-end">
<button class="px-4 py-2 bg-blue-300 dark:bg-blue-700 text-blue-800 dark:text-blue-200 rounded-md hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-300">View Messages</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
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 messages d’alerte réactifs conçu avec l’effet glassmorphism à des fins de commerce électronique. Il présente une mise en page simple avec une palette de couleurs monochromatiques et la prise en charge du mode sombre à l’aide de Tailwind CSS.