Alert Messages Component
A simple, responsive, grayscale alert message component for e-commerce sites, with dark mode support.
HTML Code
<div class="flex items-center p-4 text-sm text-gray-800 border border-gray-300 rounded-lg bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600" role="alert">
<svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 15.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/>
</svg>
<span class="sr-only">Info</span>
<div>
<span class="font-medium">New message:</span> Your order has been placed successfully.
</div>
</div>Related Components
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.
Glassmorphism Alert Message
Responsive Glassmorphism Alert Message component for an e-commerce site, with dark mode support and an analogous color scheme, built with Tailwind CSS.
Alert Messages Component
A dark mode responsive alert messages component for showcasing notifications or messages in a portfolio, designed with earth tones and multiple interactive elements.