<!--
@type: Alert
@industry: SaaS
@style: Minimal
@category: UI Element
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
/* Colors */
--green-50: #f0fdf4;
--green-100: #dcfce7;
--green-200: #bbf7d0;
--green-500: #22c55e;
--green-600: #16a34a;
--green-700: #15803d;
--green-800: #166534;
--yellow-50: #fefce8;
--yellow-100: #fef9c3;
--yellow-200: #fef08a;
--yellow-500: #eab308;
--yellow-600: #ca8a04;
--yellow-700: #a16207;
--yellow-800: #854d0e;
--red-50: #fef2f2;
--red-100: #fee2e2;
--red-200: #fecaca;
--red-500: #ef4444;
--red-600: #dc2626;
--red-700: #b91c1c;
--red-800: #991b1b;
--blue-50: #eff6ff;
--blue-100: #dbeafe;
--blue-200: #bfdbfe;
--blue-500: #3b82f6;
--blue-600: #2563eb;
--blue-700: #1d4ed8;
--blue-800: #1e40af;
/* Spacing */
--spacing-1: 0.25rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-5: 1.25rem;
--spacing-6: 1.5rem;
--spacing-12: 3rem;
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
/* Container */
.alert-container {
width: 100%;
max-width: 80rem;
margin: 0 auto;
padding: var(--spacing-12) var(--spacing-4);
}
@media (min-width: 640px) {
.alert-container {
padding-left: var(--spacing-6);
padding-right: var(--spacing-6);
}
}
@media (min-width: 1024px) {
.alert-container {
padding-left: var(--spacing-8);
padding-right: var(--spacing-8);
}
}
/* Alert Wrapper */
.alert-wrapper {
margin-bottom: var(--spacing-6);
}
/* Base Alert */
.alert {
border-radius: 0.5rem;
padding: var(--spacing-4);
display: flex;
align-items: center;
gap: var(--spacing-3);
transition: opacity 150ms ease-in-out;
}
.alert-icon {
flex-shrink: 0;
}
.alert-icon svg {
width: var(--spacing-5);
height: var(--spacing-5);
}
.alert-content {
flex: 1;
}
.alert-title {
font-size: 0.875rem;
font-weight: 500;
}
.alert-message {
margin-top: var(--spacing-1);
font-size: 0.875rem;
}
.alert-dismiss {
flex-shrink: 0;
border-radius: 0.375rem;
border: none;
cursor: pointer;
padding: 0.25rem;
background: transparent;
}
.alert-dismiss svg {
width: var(--spacing-5);
height: var(--spacing-5);
}
.alert-dismiss:focus {
outline: none;
ring: 2px;
ring-offset: 2px;
}
/* Success Alert */
.alert-success {
background-color: var(--green-50);
border: 1px solid var(--green-200);
}
.alert-success .alert-icon svg,
.alert-success .alert-dismiss {
color: var(--green-600);
}
.alert-success .alert-title {
color: var(--green-800);
}
.alert-success .alert-message {
color: var(--green-700);
}
.alert-success .alert-dismiss:hover {
background-color: var(--green-100);
}
.alert-success .alert-dismiss:focus {
ring-color: var(--green-500);
}
/* Warning Alert */
.alert-warning {
background-color: var(--yellow-50);
border: 1px solid var(--yellow-200);
}
.alert-warning .alert-icon svg,
.alert-warning .alert-dismiss {
color: var(--yellow-600);
}
.alert-warning .alert-title {
color: var(--yellow-800);
}
.alert-warning .alert-message {
color: var(--yellow-700);
}
.alert-warning .alert-dismiss:hover {
background-color: var(--yellow-100);
}
.alert-warning .alert-dismiss:focus {
ring-color: var(--yellow-500);
}
/* Error Alert */
.alert-error {
background-color: var(--red-50);
border: 1px solid var(--red-200);
}
.alert-error .alert-icon svg,
.alert-error .alert-dismiss {
color: var(--red-600);
}
.alert-error .alert-title {
color: var(--red-800);
}
.alert-error .alert-message {
color: var(--red-700);
}
.alert-error .alert-dismiss:hover {
background-color: var(--red-100);
}
.alert-error .alert-dismiss:focus {
ring-color: var(--red-500);
}
/* Info Alert */
.alert-info {
background-color: var(--blue-50);
border: 1px solid var(--blue-200);
}
.alert-info .alert-icon svg,
.alert-info .alert-dismiss,
.alert-info .alert-action {
color: var(--blue-600);
}
.alert-info .alert-title {
color: var(--blue-800);
}
.alert-info .alert-message {
color: var(--blue-700);
}
.alert-info .alert-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.alert-info .alert-action {
margin-left: var(--spacing-4);
font-size: 0.875rem;
font-weight: 500;
background: none;
border: none;
cursor: pointer;
text-decoration: none;
}
.alert-info .alert-action:hover {
color: var(--blue-500);
}
.alert-info .alert-action:focus {
outline: none;
text-decoration: underline;
}
</style>
<section class="alert-container">
<!-- Success Alert -->
<div class="alert-wrapper">
<div class="alert alert-success" role="alert">
<div class="alert-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
</svg>
</div>
<div class="alert-content">
<h3 class="alert-title">Deployment Successful</h3>
<div class="alert-message">
Your application has been successfully deployed to production environment.
</div>
</div>
<button type="button" class="alert-dismiss" aria-label="Dismiss alert">
<span class="sr-only">Dismiss alert</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
</svg>
</button>
</div>
</div>
<!-- Warning Alert -->
<div class="alert-wrapper">
<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" aria-hidden="true">
<path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
</svg>
</div>
<div class="alert-content">
<h3 class="alert-title">Usage Warning</h3>
<div class="alert-message">
You're approaching your API rate limit. Consider upgrading your plan.
</div>
</div>
<button type="button" class="alert-dismiss" aria-label="Dismiss alert">
<span class="sr-only">Dismiss alert</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
</svg>
</button>
</div>
</div>
<!-- Error Alert -->
<div class="alert-wrapper">
<div class="alert alert-error" role="alert">
<div class="alert-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
</svg>
</div>
<div class="alert-content">
<h3 class="alert-title">Authentication Failed</h3>
<div class="alert-message">
Invalid API credentials. Please check your authentication tokens.
</div>
</div>
<button type="button" class="alert-dismiss" aria-label="Dismiss alert">
<span class="sr-only">Dismiss alert</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
</svg>
</button>
</div>
</div>
<!-- Info Alert with Action -->
<div class="alert-wrapper">
<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" aria-hidden="true">
<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 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
</svg>
</div>
<div class="alert-content">
<div class="alert-header">
<h3 class="alert-title">New Feature Available</h3>
<button type="button" class="alert-action">
Learn more
<span class="sr-only">about new features</span>
</button>
</div>
<div class="alert-message">
We've just released our new AI-powered analytics dashboard.
</div>
</div>
</div>
</div>
</section>
<script>
// Add click event listeners to all dismiss buttons
document.addEventListener('DOMContentLoaded', function() {
const dismissButtons = document.querySelectorAll('.alert-dismiss');
dismissButtons.forEach(button => {
button.addEventListener('click', function() {
const alert = this.closest('.alert-wrapper');
alert.style.opacity = '0';
setTimeout(() => {
alert.style.display = 'none';
}, 150);
});
});
});
</script>
<!--
@type: Alert
@industry: SaaS
@style: Minimal
@category: UI Element
@framework: Tailwind
@license: Free
-->
<section class="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<!-- Success Alert -->
<div class="mb-6">
<div class="rounded-lg bg-green-50 p-4 border border-green-200" role="alert">
<div class="flex items-center gap-3">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-medium text-green-800">Deployment Successful</h3>
<div class="mt-1 text-sm text-green-700">
Your application has been successfully deployed to production environment.
</div>
</div>
<button type="button" class="flex-shrink-0 rounded-md bg-green-50 text-green-600 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2" aria-label="Dismiss alert">
<span class="sr-only">Dismiss alert</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
</svg>
</button>
</div>
</div>
</div>
<!-- Warning Alert -->
<div class="mb-6">
<div class="rounded-lg bg-yellow-50 p-4 border border-yellow-200" role="alert">
<div class="flex items-center gap-3">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-yellow-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-medium text-yellow-800">Usage Warning</h3>
<div class="mt-1 text-sm text-yellow-700">
You're approaching your API rate limit. Consider upgrading your plan.
</div>
</div>
<button type="button" class="flex-shrink-0 rounded-md bg-yellow-50 text-yellow-600 hover:bg-yellow-100 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2" aria-label="Dismiss alert">
<span class="sr-only">Dismiss alert</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
</svg>
</button>
</div>
</div>
</div>
<!-- Error Alert -->
<div class="mb-6">
<div class="rounded-lg bg-red-50 p-4 border border-red-200" role="alert">
<div class="flex items-center gap-3">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-red-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-medium text-red-800">Authentication Failed</h3>
<div class="mt-1 text-sm text-red-700">
Invalid API credentials. Please check your authentication tokens.
</div>
</div>
<button type="button" class="flex-shrink-0 rounded-md bg-red-50 text-red-600 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2" aria-label="Dismiss alert">
<span class="sr-only">Dismiss alert</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
</svg>
</button>
</div>
</div>
</div>
<!-- Info Alert with Action -->
<div class="mb-6">
<div class="rounded-lg bg-blue-50 p-4 border border-blue-200" role="alert">
<div class="flex items-center gap-3">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<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 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
</svg>
</div>
<div class="flex-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium text-blue-800">New Feature Available</h3>
<div class="ml-4">
<button type="button" class="text-sm font-medium text-blue-600 hover:text-blue-500 focus:outline-none focus:underline">
Learn more
<span class="sr-only">about new features</span>
</button>
</div>
</div>
<div class="mt-1 text-sm text-blue-700">
We've just released our new AI-powered analytics dashboard.
</div>
</div>
</div>
</div>
</div>
</section>
<script>
// Add click event listeners to all dismiss buttons
document.addEventListener('DOMContentLoaded', function() {
const dismissButtons = document.querySelectorAll('[aria-label="Dismiss alert"]');
dismissButtons.forEach(button => {
button.addEventListener('click', function() {
const alert = this.closest('[role="alert"]').parentElement;
alert.style.opacity = '0';
setTimeout(() => {
alert.style.display = 'none';
}, 150);
});
});
});
</script>
<style>
[role="alert"] {
transition: opacity 150ms ease-in-out;
}
</style>
