Alert Messages Component
A brutalist-style alert messages component with a pastel color scheme, designed for business/corporate websites and responsive with dark theme support.
HTML Code
<div class="flex flex-col space-y-4 p-6 bg-white text-black dark:bg-gray-800 dark:text-white">
<!-- Alert Message Header -->
<h2 class="text-2xl font-bold">Alert Messages</h2>
<!-- Alert Message Item -->
<div class="flex items-center p-4 bg-pink-100 border-l-4 border-pink-500 dark:bg-pink-800 dark:border-pink-400">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="flex flex-col">
<span class="font-semibold">John Doe</span>
<p>This is an informational alert message to notify you about updates.</p>
</div>
</div>
<!-- Alert Message Item -->
<div class="flex items-center p-4 bg-yellow-100 border-l-4 border-yellow-500 dark:bg-yellow-800 dark:border-yellow-400">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
<div class="flex flex-col">
<span class="font-semibold">Jane Smith</span>
<p>This is a warning alert message to notify you about potential issues.</p>
</div>
</div>
<!-- Alert Message Item -->
<div class="flex items-center p-4 bg-green-100 border-l-4 border-green-500 dark:bg-green-800 dark:border-green-400">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
<div class="flex flex-col">
<span class="font-semibold">Alex Johnson</span>
<p>This is a success alert message to confirm your action.</p>
</div>
</div>
</div>Related Components
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
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.
Marketplace Alert Messages Component
A Material Design-inspired alert messages component with autumn colors, suitable for marketplace platforms. Features various alert types (success, warning, error, info) with dismissible options and dark mode support.