Alert Messages Component
This component is an alert message with a minimalist/flat design, earth tones color scheme, and a complex layout. It is designed for social media interfaces and is responsive with dark theme support. It uses Tailwind CSS for styling and includes multiple interactive elements.
HTML Code
<div class="space-y-4 p-4 max-w-md mx-auto">
<!-- Success Alert -->
<div class="flex items-center p-4 bg-green-100 text-green-800 rounded-lg shadow-md dark:bg-green-700 dark:text-green-100" role="alert">
<svg class="w-6 h-6 mr-3" 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="font-bold">Success! Your post has been shared.</div>
<div class="text-sm">You've reached 120 new people.</div>
</div>
<button class="ml-auto text-green-800 dark:text-green-100 hover:text-green-600 dark:hover:text-green-300 focus:outline-none">
<svg class="w-4 h-4" 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="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<!-- Warning Alert -->
<div class="flex items-center p-4 bg-yellow-100 text-yellow-800 rounded-lg shadow-md dark:bg-yellow-700 dark:text-yellow-100" role="alert">
<svg class="w-6 h-6 mr-3" 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.332 16c-.77 1.333.192 3 1.732 3z"></path></svg>
<div>
<div class="font-bold">Warning: Some images failed to upload.</div>
<div class="text-sm">Please check your network connection.</div>
</div>
<button class="ml-auto text-yellow-800 dark:text-yellow-100 hover:text-yellow-600 dark:hover:text-yellow-300 focus:outline-none">
<svg class="w-4 h-4" 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="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<!-- Error Alert with Avatar -->
<div class="flex items-start p-4 bg-red-100 text-red-800 rounded-lg shadow-md dark:bg-red-700 dark:text-red-100" role="alert">
<img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<div class="font-bold">Error: Message delivery failed.</div>
<div class="text-sm">User Related Components
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.
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.
Alert Messages Component
A minimalist alert message component designed for blogs, featuring a grayscale color scheme. It includes a title, message, and close button. Responsive design with dark theme support.