<!--
@type: Alert
@industry: Marketing
@style: Dark
@category: UI Element
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
/* Colors */
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
--green-300: #86efac;
--green-400: #4ade80;
--green-500: #22c55e;
--green-600: #16a34a;
--yellow-300: #fcd34d;
--yellow-400: #fbbf24;
--yellow-500: #f59e0b;
--red-400: #f87171;
--red-500: #ef4444;
--red-600: #dc2626;
--red-700: #b91c1c;
--blue-400: #60a5fa;
--blue-500: #3b82f6;
/* Spacing */
--spacing-1: 0.25rem;
--spacing-2: 0.5rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--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";
}
/* Component Styles */
.alert-section {
background-color: var(--gray-900);
padding: var(--spacing-12) var(--spacing-4);
}
.alert-container {
max-width: 80rem;
margin: 0 auto;
}
.alert-container > * + * {
margin-top: var(--spacing-6);
}
.alert {
background-color: var(--gray-800);
border-left: 4px solid;
padding: var(--spacing-6);
border-radius: 0.5rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.alert-content {
display: flex;
align-items: flex-start;
}
.alert-icon {
flex-shrink: 0;
}
.alert-icon svg {
height: 1.5rem;
width: 1.5rem;
}
.alert-body {
margin-left: var(--spacing-4);
line-height: 1.5;
width: 100%;
}
.alert-title {
font-size: 1.125rem;
font-weight: 500;
color: white;
}
.alert-message {
margin-top: var(--spacing-2);
color: var(--gray-300);
}
.alert-actions {
margin-top: var(--spacing-4);
display: flex;
gap: var(--spacing-4);
}
.alert-link {
font-size: 0.875rem;
font-weight: 500;
background: none;
border: none;
cursor: pointer;
}
.alert-link:focus {
outline: none;
text-decoration: underline;
}
.alert-close {
margin-left: auto;
margin-top: -0.5rem;
background: none;
border: none;
cursor: pointer;
}
.alert-close svg {
height: 1.25rem;
width: 1.25rem;
color: var(--gray-400);
}
.alert-close:hover svg {
color: var(--gray-300);
}
/* Success Alert */
.alert-success {
border-left-color: var(--green-500);
}
.alert-success .alert-icon svg {
color: var(--green-400);
}
.alert-success .alert-link {
color: var(--green-400);
}
.alert-success .alert-link:hover {
color: var(--green-300);
}
/* Warning Alert */
.alert-warning {
border-left-color: var(--yellow-500);
}
.alert-warning .alert-icon svg {
color: var(--yellow-400);
}
.alert-warning .alert-link {
color: var(--yellow-400);
}
.alert-warning .alert-link:hover {
color: var(--yellow-300);
}
/* Error Alert */
.alert-error {
border-left-color: var(--red-500);
}
.alert-error .alert-icon svg {
color: var(--red-400);
}
.alert-error .alert-button {
background-color: var(--red-600);
color: white;
padding: var(--spacing-2) var(--spacing-4);
border-radius: 0.375rem;
font-size: 0.875rem;
font-weight: 500;
border: 1px solid transparent;
display: inline-flex;
align-items: center;
cursor: pointer;
transition: all 0.2s ease;
}
.alert-error .alert-button:hover {
background-color: var(--red-700);
}
.alert-error .alert-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--gray-900), 0 0 0 4px var(--red-500);
}
/* Info Alert */
.alert-info {
border-left-color: var(--blue-500);
}
.alert-info .alert-icon svg {
color: var(--blue-400);
}
.alert-info .progress-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.alert-info .progress-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--blue-400);
}
.alert-info .progress-bar {
height: 0.5rem;
background-color: var(--gray-700);
border-radius: 0.25rem;
overflow: hidden;
}
.alert-info .progress-value {
height: 100%;
background-color: var(--blue-500);
width: 60%;
}
/* Responsive */
@media (min-width: 640px) {
.alert-section {
padding-left: var(--spacing-6);
padding-right: var(--spacing-6);
}
}
@media (min-width: 1024px) {
.alert-section {
padding-left: var(--spacing-8);
padding-right: var(--spacing-8);
}
}
</style>
<section class="alert-section">
<div class="alert-container">
<!-- Success Alert -->
<div class="alert alert-success" role="alert">
<div class="alert-content">
<div class="alert-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
</div>
<div class="alert-body">
<h3 class="alert-title">Campaign Successfully Launched</h3>
<p class="alert-message">Your marketing campaign "Summer Sale 2024" has been successfully launched and is now live across all channels.</p>
<div class="alert-actions">
<button type="button" class="alert-link">View Campaign Details</button>
</div>
</div>
<button type="button" class="alert-close" onclick="this.parentElement.parentElement.style.display='none'" aria-label="Close alert">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<!-- Warning Alert -->
<div class="alert alert-warning" role="alert">
<div class="alert-content">
<div class="alert-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<div class="alert-body">
<h3 class="alert-title">Ad Budget Alert</h3>
<p class="alert-message">Your Facebook Ads campaign is approaching its daily budget limit. Consider adjusting your budget to maintain campaign performance.</p>
<div class="alert-actions">
<button type="button" class="alert-link">Adjust Budget</button>
<button type="button" class="alert-link" style="color: var(--gray-400);">Review Campaign</button>
</div>
</div>
<button type="button" class="alert-close" onclick="this.parentElement.parentElement.style.display='none'" aria-label="Close alert">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<!-- Error Alert -->
<div class="alert alert-error" role="alert">
<div class="alert-content">
<div class="alert-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
<div class="alert-body">
<h3 class="alert-title">API Integration Error</h3>
<p class="alert-message">Unable to connect to the Analytics API. This may affect your campaign reporting and performance tracking.</p>
<div class="alert-actions">
<button type="button" class="alert-button">Troubleshoot Now</button>
</div>
</div>
<button type="button" class="alert-close" onclick="this.parentElement.parentElement.style.display='none'" aria-label="Close alert">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<!-- Info Alert with Progress -->
<div class="alert alert-info" role="alert">
<div class="alert-content">
<div class="alert-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="alert-body">
<h3 class="alert-title">Content Analysis in Progress</h3>
<p class="alert-message">Analyzing your content performance across social media channels. This may take a few minutes.</p>
<div class="alert-actions">
<div style="width: 100%;">
<div class="progress-header">
<span class="progress-label">Analysis Progress</span>
<span class="progress-label">60%</span>
</div>
<div class="progress-bar">
<div class="progress-value"></div>
</div>
</div>
</div>
</div>
<button type="button" class="alert-close" onclick="this.parentElement.parentElement.style.display='none'" aria-label="Close alert">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
</section>
<!--
@type: Alert
@industry: Marketing
@style: Dark
@category: UI Element
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto space-y-6">
<!-- Success Alert -->
<div class="bg-gray-800 border-l-4 border-green-500 p-6 rounded-lg shadow-lg" role="alert">
<div class="flex items-start">
<div class="flex-shrink-0">
<!-- Heroicon name: check-circle -->
<svg class="h-6 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-white">Campaign Successfully Launched</h3>
<p class="mt-2 text-gray-300">Your marketing campaign "Summer Sale 2024" has been successfully launched and is now live across all channels.</p>
<div class="mt-4">
<button type="button" class="text-sm font-medium text-green-400 hover:text-green-300 focus:outline-none focus:underline">
View Campaign Details
</button>
</div>
</div>
<button type="button" class="ml-auto -mt-2" onclick="this.parentElement.parentElement.style.display='none'" aria-label="Close alert">
<svg class="h-5 w-5 text-gray-400 hover:text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<!-- Warning Alert -->
<div class="bg-gray-800 border-l-4 border-yellow-500 p-6 rounded-lg shadow-lg" role="alert">
<div class="flex items-start">
<div class="flex-shrink-0">
<!-- Heroicon name: exclamation -->
<svg class="h-6 w-6 text-yellow-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-white">Ad Budget Alert</h3>
<p class="mt-2 text-gray-300">Your Facebook Ads campaign is approaching its daily budget limit. Consider adjusting your budget to maintain campaign performance.</p>
<div class="mt-4 flex space-x-4">
<button type="button" class="text-sm font-medium text-yellow-400 hover:text-yellow-300 focus:outline-none focus:underline">
Adjust Budget
</button>
<button type="button" class="text-sm font-medium text-gray-400 hover:text-gray-300 focus:outline-none focus:underline">
Review Campaign
</button>
</div>
</div>
<button type="button" class="ml-auto -mt-2" onclick="this.parentElement.parentElement.style.display='none'" aria-label="Close alert">
<svg class="h-5 w-5 text-gray-400 hover:text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<!-- Error Alert -->
<div class="bg-gray-800 border-l-4 border-red-500 p-6 rounded-lg shadow-lg" role="alert">
<div class="flex items-start">
<div class="flex-shrink-0">
<!-- Heroicon name: x-circle -->
<svg class="h-6 w-6 text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
<div class="ml-4">
<h3 class="text-lg font-medium text-white">API Integration Error</h3>
<p class="mt-2 text-gray-300">Unable to connect to the Analytics API. This may affect your campaign reporting and performance tracking.</p>
<div class="mt-4">
<button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
Troubleshoot Now
</button>
</div>
</div>
<button type="button" class="ml-auto -mt-2" onclick="this.parentElement.parentElement.style.display='none'" aria-label="Close alert">
<svg class="h-5 w-5 text-gray-400 hover:text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<!-- Info Alert with Progress -->
<div class="bg-gray-800 border-l-4 border-blue-500 p-6 rounded-lg shadow-lg" role="alert">
<div class="flex items-start">
<div class="flex-shrink-0">
<!-- Heroicon name: information-circle -->
<svg class="h-6 w-6 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="ml-4 flex-grow">
<h3 class="text-lg font-medium text-white">Content Analysis in Progress</h3>
<p class="mt-2 text-gray-300">Analyzing your content performance across social media channels. This may take a few minutes.</p>
<div class="mt-4">
<div class="relative pt-1">
<div class="flex mb-2 items-center justify-between">
<div>
<span class="text-xs font-semibold inline-block text-blue-400">
Analysis Progress
</span>
</div>
<div class="text-right">
<span class="text-xs font-semibold inline-block text-blue-400">
60%
</span>
</div>
</div>
<div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-gray-700">
<div style="width:60%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500"></div>
</div>
</div>
</div>
</div>
<button type="button" class="ml-auto -mt-2" onclick="this.parentElement.parentElement.style.display='none'" aria-label="Close alert">
<svg class="h-5 w-5 text-gray-400 hover:text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
</section>
