Alert Messages Component
A minimalist and vibrant alert messages component for business/corporate websites, featuring responsive design and dark mode support. It includes different alert types like success, error, info, and warning.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">
<div class="mx-auto max-w-4xl space-y-6">
<!-- Success Alert -->
<div role="alert" class="p-4 rounded-lg shadow-md bg-green-100 text-green-800 border border-green-200 dark:bg-green-700 dark:text-green-50 dark:border-green-800 flex items-start space-x-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 text-green-600 dark:text-green-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div class="flex-grow">
<h3 class="font-bold text-lg leading-tight">Success! Your operation was completed.</h3>
<p class="mt-1 text-sm">The data has been successfully saved to the cloud. You can now view the changes in your dashboard.</p>
</div>
<button class="p-1 rounded-full text-green-600 hover:bg-green-200 dark:text-green-50 dark:hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Error Alert -->
<div role="alert" class="p-4 rounded-lg shadow-md bg-red-100 text-red-800 border border-red-200 dark:bg-red-700 dark:text-red-50 dark:border-red-800 flex items-start space-x-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 text-red-600 dark:text-red-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div class="flex-grow">
<h3 class="font-bold text-lg leading-tight">Error! Something went wrong.</h3>
<p class="mt-1 text-sm">Failed to process your request. Please try again later or contact support if the problem persists.</p>
</div>
<button class="p-1 rounded-full text-red-600 hover:bg-red-200 dark:text-red-50 dark:hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Info Alert -->
<div role="alert" class="p-4 rounded-lg shadow-md bg-blue-100 text-blue-800 border border-blue-200 dark:bg-blue-700 dark:text-blue-50 dark:border-blue-800 flex items-start space-x-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 text-blue-600 dark:text-blue-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div class="flex-grow">
<h3 class="font-bold text-lg leading-tight">Information! Please note this important update.</h3>
<p class="mt-1 text-sm">We have updated our privacy policy. Please review the new terms to continue using our services.</p>
</div>
<button class="p-1 rounded-full text-blue-600 hover:bg-blue-200 dark:text-blue-50 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Warning Alert -->
<div role="alert" class="p-4 rounded-lg shadow-md bg-yellow-100 text-yellow-800 border border-yellow-200 dark:bg-yellow-700 dark:text-yellow-50 dark:border-yellow-800 flex items-start space-x-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 text-yellow-600 dark:text-yellow-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" 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.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<div class="flex-grow">
<h3 class="font-bold text-lg leading-tight">Warning! Your session will expire soon.</h3>
<p class="mt-1 text-sm">You have 5 minutes left before your current session times out. Please save your work to avoid data loss.</p>
</div>
<button class="p-1 rounded-full text-yellow-600 hover:bg-yellow-200 dark:text-yellow-50 dark:hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>Related Components
Glassmorphism Alert Message
Glassmorphism Alert Message Component with a triadic color scheme and simple layout, designed for portfolios, with responsive design and dark mode support.
PlayfulForestAlert
A playful and cheerful alert messages component designed with a forest/green palette, rounded elements, and friendly aesthetics, suitable for business/corporate websites. It's responsive and includes 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.