Component:
Alert Marketing Dark
Colors:
Description:
This carefully crafted Alert component is perfect for Marketing landing pages, featuring a Dark design that looks great and converts well.
Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.
<!--
@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> This is a Pro component
Access the full component collection
Get all premium components and focus on building your business
Only 42 early bird spots left 40% offUnlock for $29
(one-time payment)Early bird discount. Regular price $49
Premium components
Get access to all pro Tailwind CSS components. New ones added monthly
Save components
Save your favorite components to your account
Unlimited usage
Use components as often as you want
Landing page submissions
Get your landing pages featured on LandingGo and earn a
strong backlink
21 DR dofollow backlink from the main page