Alert Messages Component
A complex, vibrant, glassmorphism-styled alert message component for e-commerce, with support for dark mode.
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>Related Components
Alert Messages Component
A simple, responsive, grayscale alert message component for e-commerce sites, with dark mode support.
Alert Messages Component
Alert Messages Component with Material Design style, Pastel color scheme, and Complex complexity level, for Portfolio purpose. Responsive design with dark theme support. No JavaScript code needed, only HTML with Tailwind classes. Dark mode uses Tailwind's dark: prefix for styling. Images use picsum.photos for images and randomuser.me for avatars.
Alert Messages Component
A retro/vintage styled alert message component for business/corporate websites, featuring earth tones and responsive design with dark mode support.