Learn to create simple and stylish notification toasts using HTML, TailwindCSS, and JavaScript. Easy steps for beginners with live code and demo.
Table of Contents
Notification toasts are small popup messages that show alerts like success, error, or info messages. They help users know what’s happening after they click a button or perform an action. In this blog, we will learn how to create notification toasts using HTML, TailwindCSS, and JavaScript. It’s a simple project for beginners who want to improve their frontend skills.
Prerequisites:
Before you begin, make sure you:
- Know basic HTML, CSS, and JavaScript
- Have Tailwind CSS set up in your project
- Use a modern browser (like Chrome)
Source Code
Step 1 (HTML Code):
Start with a basic HTML file. Add a button to trigger the toast and a container to hold your toast messages.
Full HTML Code Overview
<!DOCTYPE html>- Declares that this is an HTML5 document.
<html lang="en">- Starts the HTML document and sets the language to English.
<head> Section:
<head>- The
<head>contains meta info, styles, and scripts used by the webpage.
<meta charset="UTF-8" />- Sets the character encoding to UTF-8. This helps support all characters, including emojis and special symbols.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />- Ensures the website looks good on all screen sizes (mobile responsive).
<title>Notification Toasts</title>- Sets the title of the page, shown in the browser tab.
Fonts:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>- These two lines improve the speed of loading fonts by connecting early to Google Fonts.
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">- Imports the "Inter" font in multiple weights (light to bold) for better text design.
Tailwind CSS:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>- Loads TailwindCSS from a CDN using a browser-friendly version. This gives you utility classes like bg-red-500, text-white, grid, etc.
External CSS:
<link rel="stylesheet" href="styles.css">- Links to your own custom stylesheet for additional or custom styling.
<body> Section:
<body>- This is where your visible content goes.
<div class="grid md:grid-cols-2 gap-5" id="toast-controls"></div>- A grid layout with a gap between elements.
- Uses md:grid-cols-2, which means on medium or larger screens, it will show 2 columns.
- This container holds buttons or controls to trigger toasts.
- id="toast-controls" allows JavaScript to target it.
<div class="toast-container" id="toast-container"></div>- This div will hold the actual toast messages (popup notifications).
- toast-container is probably styled in your styles.css.
- id="toast-container" is used by JavaScript to append toasts dynamically.
External JavaScript:
<script src="script.js"></script>- Loads your custom JavaScript file, which handles showing or hiding toasts based on user interaction.
Closing Tags:
</body>
</html>- Ends the body and HTML document.
Step 2 (CSS Code):
Once the basic HTML structure of the notification toasts is in place, the next step is to add styling to the toasts using CSS. Here's a simple explanation of what each section of this CSS code does:
1. body Styling
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #fef2f2;
font-family: Inter, 'Arial';
height: 100vh;
}- Centers everything on the screen.
- Applies a light pink background.
- Uses the Inter font, falling back to Arial if not available.
- Fills full screen height (100vh).
2. Buttons (.toast-trigger)
.toast-trigger {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border: none;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-transform: capitalize;
}- Styles the buttons that trigger each toast.
- Rounded buttons with some padding and hover animations.
3. Button Variants (Success, Error, etc.)
Each button has different background, border, and hover effects.
Example: Success
.toast-trigger-success {
background: #f0fdf4;
color: #166534;
border: 2px solid #bbf7d0;
}
.toast-trigger-success:hover {
background: #10b981;
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}- Similar styles apply to .toast-trigger-error, .toast-trigger-warning, and .toast-trigger-info.
4. .trigger-icon
.trigger-icon {
font-size: 16px;
font-weight: bold;
}- Icon inside the trigger button (like ✓, ✕, ⚠) is bold and bigger.
5. .toast-container
.toast-container {
position: fixed;
top: 20px;
right: 20px;
...
}- Where all toast notifications appear (top-right of screen).
- Responsive styles for smaller screens using @media.
6. .toast
.toast {
position: relative;
background: white;
border-radius: 16px;
padding: 20px;
display: flex;
...
animation: toastSlideIn 0.4s ease;
}- The toast card itself: white rounded box, slight blur, and entrance animation.
7. Toast Animations
Slide In
@keyframes toastSlideIn {
from {
opacity: 0;
transform: translateX(100%) scale(0.9);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}Slide Out
@keyframes toastSlideOut {
to {
opacity: 0;
transform: translateX(100%) scale(0.9);
}
}- Controls how toast appears/disappears from the right.
8. .toast-icon + .icon-pulse
.toast-icon {
width: 32px;
height: 32px;
...
}
.icon-pulse {
animation: iconPulse 2s ease-in-out infinite;
}- A circle background behind the icon.
- The icon-pulse creates a glowing/pulsing animation.
9. Content Area (.toast-content)
.toast-title { ... }
.toast-message { ... }- Title (like “Success!”) and message text (like “Your action was successful.”)
10. .toast-close
.toast-close {
width: 32px;
height: 32px;
...
}- The close (×) button in the top-right of the toast.
- Slight hover animation with blur effect.
11. Progress Bar
.toast-progress { ... }
.progress-bar {
animation: progressBar 5s linear;
}
@keyframes progressBar {
to {
transform: translateX(0);
}
}- A small bar at the bottom that fills up over 5 seconds, indicating when the toast will auto-dismiss.
12. Glow Effect
.toast-glow {
position: absolute;
inset: -2px;
...
}- Adds a soft glow around the toast for a modern, glassy look.
body{
display: flex;
justify-content: center;
align-items: center;
background-color: #fef2f2;
font-family: Inter, 'Arial';
height: 100vh;
}
.toast-trigger {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border: none;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: capitalize;
}
.toast-trigger-success {
background: #f0fdf4;
color: #166534;
border: 2px solid #bbf7d0;
}
.toast-trigger-success:hover {
background: #10b981;
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}
.toast-trigger-error {
background: #fef2f2;
color: #991b1b;
border: 2px solid #fecaca;
}
.toast-trigger-error:hover {
background: #ef4444;
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
}
.toast-trigger-warning {
background: #fffbeb;
color: #92400e;
border: 2px solid #fed7aa;
}
.toast-trigger-warning:hover {
background: #f59e0b;
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3);
}
.toast-trigger-info {
background: #eff6ff;
color: #1e40af;
border: 2px solid #bfdbfe;
}
.toast-trigger-info:hover {
background: #3b82f6;
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}
.trigger-icon {
font-size: 16px;
font-weight: bold;
}
.toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 12px;
max-width: 400px;
width: 100%;
}
@media (max-width: 768px) {
.toast-container {
top: 10px;
right: 10px;
left: 10px;
max-width: none;
}
}
.toast {
position: relative;
background: white;
border-radius: 16px;
padding: 20px;
display: flex;
align-items: flex-start;
gap: 16px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.2);
backdrop-filter: blur(20px);
animation: toastSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
color: white;
}
@keyframes toastSlideIn {
from {
opacity: 0;
transform: translateX(100%) scale(0.9);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
.toast.removing {
animation: toastSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes toastSlideOut {
to {
opacity: 0;
transform: translateX(100%) scale(0.9);
}
}
.toast-icon {
position: relative;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: bold;
flex-shrink: 0;
backdrop-filter: blur(10px);
}
.icon-pulse {
position: absolute;
inset: -4px;
border-radius: 50%;
background: inherit;
opacity: 0.3;
animation: iconPulse 2s ease-in-out infinite;
}
@keyframes iconPulse {
0%,
100% {
transform: scale(1);
opacity: 0.3;
}
50% {
transform: scale(1.2);
opacity: 0.1;
}
}
.toast-content {
flex: 1;
min-width: 0;
}
.toast-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 4px;
color: white;
}
.toast-message {
font-size: 14px;
line-height: 1.4;
color: rgba(255, 255, 255, 0.9);
margin: 0;
}
.toast-close {
background: rgba(255, 255, 255, 0.2);
border: none;
border-radius: 8px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: white;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
flex-shrink: 0;
}
.toast-close:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
.toast-progress {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: rgba(255, 255, 255, 0.2);
overflow: hidden;
}
.progress-bar {
height: 100%;
background: rgba(255, 255, 255, 0.8);
width: 100%;
transform: translateX(-100%);
animation: progressBar 5s linear;
}
@keyframes progressBar {
to {
transform: translateX(0);
}
}
.toast-glow {
position: absolute;
inset: -2px;
background: inherit;
border-radius: 18px;
filter: blur(8px);
opacity: 0.3;
z-index: -1;
} Step 3 (JavaScript Code):
Use JavaScript to create the toast message and remove it after a few seconds. Here’s a simple and clear explanation of how each part works:
1. toastTypes – Types of Notifications
const toastTypes = [
{
type: 'success',
title: 'Success!',
message: 'Your action was completed successfully.',
icon: '✓'
},
...
];- This array stores different kinds of toasts (success, error, warning, info).
- Each object includes:
- type: name of the toast (used for styling)
- title: bold text shown at the top of the toast
- message: short info shown under the title
- icon: a symbol to match the type (✓, ✕, ⚠, ℹ)
2. toastStyles – Styling for Each Toast Type
const toastStyles = {
success: {
background: 'linear-gradient(...)',
border: '#10b981',
icon: '✓'
},
...
};- Matches each toast type to its visual style:
- background: gradient color
- border: left colored border
- icon: again, a visual symbol (also repeated from toastTypes for use here)
3. Selecting HTML Elements
const container = document.getElementById('toast-container');
const controls = document.getElementById('toast-controls');- Grabs the two main divs from the HTML:
- #toast-controls: where the toast buttons go
- #toast-container: where the toast messages appear
4. Creating Toast Buttons
toastTypes.forEach(({ type, icon }) => {
const btn = document.createElement('button');
...
controls.appendChild(btn);
});- For each toast type, it:
- Creates a button that says “Show success,” “Show error,” etc.
- Adds a class name like toast-trigger-success
- Adds a click event that calls showToast(type) when clicked
- Appends the button to the controls area
5. showToast(type) – Show the Toast
function showToast(type) {
const toastData = toastTypes.find(t => t.type === type);
const styles = toastStyles[type];- Finds the right toast data and styles based on the clicked button.
- Then creates a new
<div>with:- Styled background and border
- Icon, title, and message
- A close button (×)
- A progress bar
- A glowing effect (optional animation)
setTimeout(() => removeToast(toast), 5000);- Toast will auto-remove after 5 seconds
6. removeToast(toast) – Hide the Toast
function removeToast(toast) {
toast.classList.add('removing');
toast.addEventListener('animationend', () => toast.remove());
}- Adds a CSS class removing (triggers fade-out animation)
- Once the animation ends, the toast is fully removed from the DOM.
const toastTypes = [
{
type: 'success',
title: 'Success!',
message: 'Your action was completed successfully.',
icon: '✓'
},
{
type: 'error',
title: 'Error!',
message: 'Something went wrong. Please try again.',
icon: '✕'
},
{
type: 'warning',
title: 'Warning!',
message: 'Please review your input and try again.',
icon: '⚠'
},
{
type: 'info',
title: 'Info',
message: 'Here is some important information for you.',
icon: 'ℹ'
}
];
const toastStyles = {
success: {
background: 'linear-gradient(135deg, #10b981, #059669)',
border: '#10b981',
icon: '✓'
},
error: {
background: 'linear-gradient(135deg, #ef4444, #dc2626)',
border: '#ef4444',
icon: '✕'
},
warning: {
background: 'linear-gradient(135deg, #f59e0b, #d97706)',
border: '#f59e0b',
icon: '⚠'
},
info: {
background: 'linear-gradient(135deg, #3b82f6, #1d4ed8)',
border: '#3b82f6',
icon: 'ℹ'
}
};
const container = document.getElementById('toast-container');
const controls = document.getElementById('toast-controls');
toastTypes.forEach(({ type, icon }) => {
const btn = document.createElement('button');
btn.innerHTML = `<span class="trigger-icon">${icon}</span>Show ${type}`;
btn.className = `toast-trigger toast-trigger-${type}`;
btn.addEventListener('click', () => showToast(type));
controls.appendChild(btn);
});
function showToast(type) {
const toastData = toastTypes.find(t => t.type === type);
const styles = toastStyles[type];
const toastId = Date.now();
const toast = document.createElement('div');
toast.className = `toast toast-${type}`;
toast.style.background = styles.background;
toast.style.borderLeft = `4px solid ${styles.border}`;
toast.innerHTML = `
<div class="toast-icon">
<span>${styles.icon}</span>
<div class="icon-pulse"></div>
</div>
<div class="toast-content">
<h4 class="toast-title">${toastData.title}</h4>
<p class="toast-message">${toastData.message}</p>
</div>
<button class="toast-close">×</button>
<div class="toast-progress"><div class="progress-bar"></div></div>
<div class="toast-glow"></div>
`;
const closeBtn = toast.querySelector('.toast-close');
closeBtn.addEventListener('click', () => removeToast(toast));
container.appendChild(toast);
setTimeout(() => removeToast(toast), 5000);
}
function removeToast(toast) {
toast.classList.add('removing');
toast.addEventListener('animationend', () => toast.remove());
}Final Output:
Conclusion:
Creating toast notifications using HTML, TailwindCSS, and JavaScript is very simple. You only need a few lines of code to build helpful messages that improve user experience. You can use these toasts in forms, eCommerce sites, dashboards, or anywhere you want to give quick alerts.
This is a beginner-friendly project that teaches how to combine layout, style, and interactivity — the three main parts of frontend development. Try it today and take your UI to the next level!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
Tags: how to create notification toasts using tailwindcss, simple toast notification with html and javascript, step-by-step toast alert using tailwind css, notification popups using html css and javascript, toast notification, tailwind toast, javascript toast, html alert
End of the article
