Composant Messages d’alerte
Un composant de message d’alerte complexe, vibrant, de style glassmorphism pour le commerce électronique, avec prise en charge du mode sombre.
HTML Code
<div class="container mx-auto p-8">
<!-- Light Mode - Vibrant Glassmorphism Alerts -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Success Alert -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-white border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-green-600">
<svg class="h-6 w-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 class="ml-3">
<p class="text-green-800 font-semibold">Success!</p>
<p class="text-green-700 text-sm mt-1">Your order has been placed successfully.</p>
</div>
</div>
</div>
<!-- Info Alert -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-white border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-blue-600">
<svg class="h-6 w-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 class="ml-3">
<p class="text-blue-800 font-semibold">Info!</p>
<p class="text-blue-700 text-sm mt-1">Your items are being processed.</p>
</div>
</div>
</div>
<!-- Warning Alert -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-white border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-yellow-600">
<svg class="h-6 w-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 4H2.81a1.97 1.97 0 01-1.834-2.283l1.642-7.34A1.97 1.97 0 014.655 4h14.69a1.97 1.97 0 011.833 2.375l-1.642 7.34A1.97 1.97 0 0119.19 20h-4.253"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-yellow-800 font-semibold">Warning!</p>
<p class="text-yellow-700 text-sm mt-1">Payment verification is pending.</p>
</div>
</div>
</div>
<!-- Danger Alert -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-white border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-red-600">
<svg class="h-6 w-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 class="ml-3">
<p class="text-red-800 font-semibold">Danger!</p>
<p class="text-red-700 text-sm mt-1">There was an issue processing your payment.</p>
</div>
</div>
</div>
</div>
<!-- Dark Mode - Vibrant Glassmorphism Alerts -->
<div class="dark mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Success Alert -->
<div class="bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-gray-700 border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-green-400">
<svg class="h-6 w-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 class="ml-3">
<p class="text-green-300 font-semibold">Success!</p>
<p class="text-green-400 text-sm mt-1">Your order has been placed successfully.</p>
</div>
</div>
</div>
<!-- Info Alert -->
<div class="bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-gray-700 border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-blue-400">
<svg class="h-6 w-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 class="ml-3">
<p class="text-blue-300 font-semibold">Info!</p>
<p class="text-blue-400 text-sm mt-1">Your items are being processed.</p>
</div>
</div>
</div>
<!-- Warning Alert -->
<div class="bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-gray-700 border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-yellow-400">
<svg class="h-6 w-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 4H2.81a1.97 1.97 0 01-1.834-2.283l1.642-7.34A1.97 1.97 0 014.655 4h14.69a1.97 1.97 0 011.833 2.375l-1.642 7.34A1.97 1.97 0 0119.19 20h-4.253"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-yellow-300 font-semibold">Warning!</p>
<p class="text-yellow-400 text-sm mt-1">Payment verification is pending.</p>
</div>
</div>
</div>
<!-- Danger Alert -->
<div class="bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-gray-700 border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-red-400">
<svg class="h-6 w-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 class="ml-3">
<p class="text-red-300 font-semibold">Danger!</p>
<p class="text-red-400 text-sm mt-1">There was an issue processing your payment.</p>
</div>
</div>
</div>
</div>
</div>Composants associés
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 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 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.