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