<!--
@type: Alert
@industry: Product
@style: Light
@category: UI Element
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
/* Colors */
--color-white: #ffffff;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-400: #9ca3af;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-blue-100: #dbeafe;
--color-blue-200: #bfdbfe;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
--color-green-200: #bbf7d0;
--color-green-500: #22c55e;
--color-red-200: #fecaca;
--color-red-500: #ef4444;
--color-yellow-200: #fef08a;
--color-yellow-500: #eab308;
/* Spacing */
--spacing-1: 0.25rem;
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-12: 3rem;
/* Container */
--alert-container-max-width: 80rem; /* max-w-7xl */
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Base Styles */
body {
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
line-height: 1.5;
}
/* Component Styles */
.alert-section {
width: 100%;
max-width: var(--alert-container-max-width);
margin: 0 auto;
padding: var(--spacing-8) var(--spacing-4);
}
.alert {
margin-bottom: var(--spacing-6);
background-color: var(--color-white);
border-radius: 0.5rem;
padding: var(--spacing-4);
display: flex;
align-items: flex-start;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
/* Alert Variants */
.alert-success {
border: 1px solid var(--color-green-200);
}
.alert-error {
border: 1px solid var(--color-red-200);
}
.alert-warning {
border: 1px solid var(--color-yellow-200);
}
.alert-info {
border: 1px solid var(--color-blue-200);
}
.alert-banner {
border-left: 4px solid var(--color-blue-500);
border-top: 1px solid var(--color-gray-100);
border-right: 1px solid var(--color-gray-100);
border-bottom: 1px solid var(--color-gray-100);
border-radius: 0 0.5rem 0.5rem 0;
}
/* Alert Icon */
.alert-icon {
flex-shrink: 0;
margin-right: var(--spacing-3);
width: 1.25rem;
height: 1.25rem;
}
.alert-success .alert-icon {
color: var(--color-green-500);
}
.alert-error .alert-icon {
color: var(--color-red-500);
}
.alert-warning .alert-icon {
color: var(--color-yellow-500);
}
.alert-info .alert-icon {
color: var(--color-blue-500);
}
/* Alert Content */
.alert-content {
flex: 1;
}
.alert-title {
font-weight: 500;
color: var(--color-gray-800);
margin-bottom: var(--spacing-1);
}
.alert-description {
font-size: 0.875rem;
color: var(--color-gray-600);
}
/* Alert Actions */
.alert-actions {
margin-top: var(--spacing-3);
display: flex;
flex-wrap: wrap;
gap: var(--spacing-2);
}
.alert-action-primary {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-blue-600);
background: none;
border: none;
padding: 0;
cursor: pointer;
transition: color 0.2s;
}
.alert-action-primary:hover {
color: var(--color-blue-700);
}
.alert-action-secondary {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-gray-500);
background: none;
border: none;
padding: 0;
cursor: pointer;
transition: color 0.2s;
}
.alert-action-secondary:hover {
color: var(--color-gray-700);
}
/* Close Button */
.alert-close {
flex-shrink: 0;
margin-left: auto;
margin-top: -0.25rem;
margin-right: -0.25rem;
padding: var(--spacing-1);
border-radius: 9999px;
color: var(--color-gray-400);
background: none;
border: none;
cursor: pointer;
transition: color 0.2s;
}
.alert-close:hover {
color: var(--color-gray-500);
}
.alert-close:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-blue-100);
}
.alert-close-icon {
width: 1rem;
height: 1rem;
}
/* Banner Specific Styles */
.banner-content {
margin-left: var(--spacing-3);
}
.banner-title {
font-size: 0.875rem;
color: var(--color-gray-800);
font-weight: 500;
}
.banner-description {
margin-top: var(--spacing-1);
font-size: 0.75rem;
color: var(--color-gray-600);
}
/* Responsive Breakpoints */
@media (min-width: 768px) {
.alert-section {
padding: var(--spacing-12) var(--spacing-4);
}
}
</style>
<section class="alert-section">
<!-- Success Alert -->
<div class="alert alert-success" role="alert" aria-live="polite">
<div class="alert-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
</div>
<div class="alert-content">
<h3 class="alert-title">Product successfully added to your cart</h3>
<p class="alert-description">Your item has been added and will be saved for 24 hours.</p>
<div class="alert-actions">
<button class="alert-action-primary">View cart</button>
<button class="alert-action-secondary">Continue shopping</button>
</div>
</div>
<button type="button" class="alert-close" aria-label="Dismiss">
<svg class="alert-close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
<!-- Error Alert -->
<div class="alert alert-error" role="alert" aria-live="assertive">
<div class="alert-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
</svg>
</div>
<div class="alert-content">
<h3 class="alert-title">Payment processing failed</h3>
<p class="alert-description">We couldn't process your payment. Please check your card details and try again.</p>
<div class="alert-actions">
<button class="alert-action-primary">Update payment method</button>
<button class="alert-action-secondary">Contact support</button>
</div>
</div>
<button type="button" class="alert-close" aria-label="Dismiss">
<svg class="alert-close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
<!-- Warning Alert -->
<div class="alert alert-warning" role="alert">
<div class="alert-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg>
</div>
<div class="alert-content">
<h3 class="alert-title">Limited stock available</h3>
<p class="alert-description">Only 3 items left in stock. Order now to secure your purchase.</p>
<div class="alert-actions">
<button class="alert-action-primary">Buy now</button>
<button class="alert-action-secondary">Add to wishlist</button>
</div>
</div>
<button type="button" class="alert-close" aria-label="Dismiss">
<svg class="alert-close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
<!-- Info Alert -->
<div class="alert alert-info" role="alert">
<div class="alert-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1v-3a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg>
</div>
<div class="alert-content">
<h3 class="alert-title">Product update available</h3>
<p class="alert-description">A new version (2.4.0) is available with improved features and bug fixes.</p>
<div class="alert-actions">
<button class="alert-action-primary">Update now</button>
<button class="alert-action-secondary">View changelog</button>
</div>
</div>
<button type="button" class="alert-close" aria-label="Dismiss">
<svg class="alert-close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
<!-- Banner Alert -->
<div class="alert alert-banner" role="alert">
<div class="alert-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
</svg>
</div>
<div class="banner-content">
<p class="banner-title">Your account security needs attention</p>
<p class="banner-description">We recommend enabling two-factor authentication to protect your account.</p>
</div>
<button type="button" class="alert-close" aria-label="Dismiss">
<svg class="alert-close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Add event listeners to all dismiss buttons
document.querySelectorAll('[aria-label="Dismiss"], [aria-label="Close"]').forEach(button => {
button.addEventListener('click', function() {
const alert = this.closest('[role="alert"]');
alert.style.opacity = '0';
alert.style.transition = 'opacity 0.3s ease';
setTimeout(() => {
alert.style.display = 'none';
}, 300);
});
});
});
</script>
<!--
@type: Alert
@industry: Product
@style: Light
@category: UI Element
@framework: Tailwind
@license: Free
-->
<section class="w-full max-w-7xl mx-auto px-4 py-8 md:py-12">
<!-- Success Alert -->
<div class="mb-6 bg-white border border-green-200 rounded-lg p-4 flex items-start shadow-sm" role="alert" aria-live="polite">
<div class="flex-shrink-0 mr-3">
<svg class="w-5 h-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
</div>
<div class="flex-1">
<h3 class="font-medium text-gray-800 mb-1">Product successfully added to your cart</h3>
<p class="text-sm text-gray-600">Your item has been added and will be saved for 24 hours.</p>
<div class="mt-3 flex flex-wrap gap-2">
<button class="text-sm font-medium text-blue-600 hover:text-blue-700">View cart</button>
<button class="text-sm font-medium text-gray-500 hover:text-gray-700">Continue shopping</button>
</div>
</div>
<button type="button" class="flex-shrink-0 ml-auto -mt-1 -mr-1 p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-100" aria-label="Dismiss">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
<!-- Error Alert -->
<div class="mb-6 bg-white border border-red-200 rounded-lg p-4 flex items-start shadow-sm" role="alert" aria-live="assertive">
<div class="flex-shrink-0 mr-3">
<svg class="w-5 h-5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
</svg>
</div>
<div class="flex-1">
<h3 class="font-medium text-gray-800 mb-1">Payment processing failed</h3>
<p class="text-sm text-gray-600">We couldn't process your payment. Please check your card details and try again.</p>
<div class="mt-3 flex flex-wrap gap-2">
<button class="text-sm font-medium text-blue-600 hover:text-blue-700">Update payment method</button>
<button class="text-sm font-medium text-gray-500 hover:text-gray-700">Contact support</button>
</div>
</div>
<button type="button" class="flex-shrink-0 ml-auto -mt-1 -mr-1 p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-100" aria-label="Dismiss">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
<!-- Warning Alert -->
<div class="mb-6 bg-white border border-yellow-200 rounded-lg p-4 flex items-start shadow-sm" role="alert">
<div class="flex-shrink-0 mr-3">
<svg class="w-5 h-5 text-yellow-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg>
</div>
<div class="flex-1">
<h3 class="font-medium text-gray-800 mb-1">Limited stock available</h3>
<p class="text-sm text-gray-600">Only 3 items left in stock. Order now to secure your purchase.</p>
<div class="mt-3 flex flex-wrap gap-2">
<button class="text-sm font-medium text-blue-600 hover:text-blue-700">Buy now</button>
<button class="text-sm font-medium text-gray-500 hover:text-gray-700">Add to wishlist</button>
</div>
</div>
<button type="button" class="flex-shrink-0 ml-auto -mt-1 -mr-1 p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-100" aria-label="Dismiss">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
<!-- Info Alert -->
<div class="mb-6 bg-white border border-blue-200 rounded-lg p-4 flex items-start shadow-sm" role="alert">
<div class="flex-shrink-0 mr-3">
<svg class="w-5 h-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1v-3a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg>
</div>
<div class="flex-1">
<h3 class="font-medium text-gray-800 mb-1">Product update available</h3>
<p class="text-sm text-gray-600">A new version (2.4.0) is available with improved features and bug fixes.</p>
<div class="mt-3 flex flex-wrap gap-2">
<button class="text-sm font-medium text-blue-600 hover:text-blue-700">Update now</button>
<button class="text-sm font-medium text-gray-500 hover:text-gray-700">View changelog</button>
</div>
</div>
<button type="button" class="flex-shrink-0 ml-auto -mt-1 -mr-1 p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-100" aria-label="Dismiss">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
<!-- Banner Alert -->
<div class="mb-6 bg-white border-l-4 border-l-blue-500 border-t border-r border-b border-gray-100 rounded-r-lg p-4 shadow-sm" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<svg class="w-5 h-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3 flex-1">
<p class="text-sm text-gray-800 font-medium">Your account security needs attention</p>
<p class="mt-1 text-xs text-gray-600">We recommend enabling two-factor authentication to protect your account.</p>
</div>
<div class="ml-4 flex-shrink-0 flex">
<button type="button" class="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-100" aria-label="Dismiss">
<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Add event listeners to all dismiss buttons
document.querySelectorAll('[aria-label="Dismiss"], [aria-label="Close"]').forEach(button => {
button.addEventListener('click', function() {
const alert = this.closest('[role="alert"]');
alert.style.opacity = '0';
alert.style.transition = 'opacity 0.3s ease';
setTimeout(() => {
alert.style.display = 'none';
}, 300);
});
});
});
</script>
