Alert Messages Component
A Glassmorphism styled Alert Messages Component for dashboard data visualization, featuring frosted glass effects, complementary colors, and responsive design with dark theme support.
HTML Code
<div class="flex flex-col space-y-4 p-6">
<div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
<div class="flex-1">
<p class="text-lg font-semibold text-black dark:text-white">Alert Title</p>
<p class="text-gray-700 dark:text-gray-300">This is an alert message describing the issue at hand.</p>
</div>
<button class="bg-red-600 text-white p-2 rounded-md hover:bg-red-500 dark:bg-red-700 dark:hover:bg-red-600">Dismiss</button>
</div>
</div>
<div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
<div class="flex-1">
<p class="text-lg font-semibold text-black dark:text-white">Information Alert</p>
<p class="text-gray-700 dark:text-gray-300">This is a piece of information to keep you updated.</p>
</div>
<button class="bg-blue-600 text-white p-2 rounded-md hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">Okay</button>
</div>
</div>
<div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
<div class="flex-1">
<p class="text-lg font-semibold text-black dark:text-white">Success Alert</p>
<p class="text-gray-700 dark:text-gray-300">Your operation was successful! Great job!</p>
</div>
<button class="bg-green-600 text-white p-2 rounded-md hover:bg-green-500 dark:bg-green-700 dark:hover:bg-green-600">Close</button>
</div>
</div>
</div>Related Components
Alert Messages Component
A retro/vintage styled alert message component for business/corporate websites, featuring earth tones and responsive design with dark mode support.
Alert Messages Component
A responsive alert messages component designed with glassmorphism effect for e-commerce purposes. It features a simple layout with a monochromatic color scheme and dark mode support using Tailwind CSS.
Alert Messages Component
A responsive alert messages component designed in a minimalistic/flat style with a pastel color scheme, suitable for social media interfaces, incorporating dark theme support.