Component:
Alert SaaS Minimal
Colors:
Description:
This carefully crafted Alert component is perfect for SaaS landing pages, featuring a Minimal 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: 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>
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