In this section we will create tailwind toast message ui and notification, tailwind v3 toast, tailwind with alpine js toast working, tailwind & alpinejs setTimeout toast message, toast notification with top right side & top left side and bottom right side example with Tailwind CSS.
How to install & setup Tailwind CSS v3
Example 1
tailwind toast ui with success, info, warning and error message.
<!-- success message -->
<div class="flex items-center justify-between max-w-xs p-4 bg-white border rounded-md shadow-sm">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-green-500" 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>
<p class="ml-3 text-sm font-bold text-green-600">Successfully Toast Message !</p>
</div>
<span class="inline-flex items-center cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-600" 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>
</span>
</div>
<!-- info message -->
<div class="flex items-center justify-between max-w-xs p-4 bg-white border rounded-md shadow-sm">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-blue-600" 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-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd" />
</svg>
<p class="ml-3 text-sm font-bold text-blue-600">Info Toast Message !</p>
</div>
<span class="inline-flex items-center cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-600" 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>
</span>
</div>
<!-- warning -->
<div class="flex items-center justify-between max-w-xs p-4 bg-white border rounded-md shadow-sm">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-yellow-600" 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>
<p class="ml-3 text-sm font-bold text-yellow-600">Warning Toast Message !</p>
</div>
<span class="inline-flex items-center cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-600" 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>
</span>
</div>
<!-- error message -->
<div class="flex items-center justify-between max-w-xs p-4 bg-white border rounded-md shadow-sm">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-red-600" 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 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
clip-rule="evenodd" />
</svg>
<p class="ml-3 text-sm font-bold text-red-600">Error Toast Message !</p>
</div>
<span class="inline-flex items-center cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-600" 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>
</span>
</div>
Example 2
tailwind v3 shadow color toast ui with success, info, warning and error message.
<!-- success message-->
<div class="flex items-center justify-between max-w-xs p-4 bg-white border rounded-md shadow-sm shadow-green-600">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-green-500" 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>
<p class="ml-3 text-sm font-bold text-green-600">Successfully Toast Message !</p>
</div>
<span class="inline-flex items-center cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-600" 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>
</span>
</div>
<!-- info message -->
<div class="flex items-center justify-between max-w-xs p-4 bg-white border rounded-md shadow-sm shadow-blue-600">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-blue-600" 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-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd" />
</svg>
<p class="ml-3 text-sm font-bold text-blue-600">Info Toast Message !</p>
</div>
<span class="inline-flex items-center cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-600" 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>
</span>
</div>
<!-- warning message -->
<div class="flex items-center justify-between max-w-xs p-4 bg-white border rounded-md shadow-sm shadow-yellow-600">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-yellow-600" 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>
<p class="ml-3 text-sm font-bold text-yellow-600">Warning Toast Message !</p>
</div>
<span class="inline-flex items-center cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-600" 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>
</span>
</div>
<!-- error message -->
<div class="flex items-center justify-between max-w-xs p-4 bg-white border rounded-md shadow-sm shadow-red-600">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-red-600" 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 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
clip-rule="evenodd" />
</svg>
<p class="ml-3 text-sm font-bold text-red-600">Error Toast Message !</p>
</div>
<span class="inline-flex items-center cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-600" 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>
</span>
</div>
tailwind v3 toast ui
Example 3
Tailwind CSS with Alpine JS toast Notification.
tailwind with alpinejs toast notification with top left side.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>tailwind toast notification with left side.</title>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
</head>
<body>
<div class="container mx-auto">
<div x-data="{ nofifiction: false }" class="fixed top-0 left-0">
<div x-show="nofifiction" x-transition
class="flex items-center justify-between max-w-xs p-4 bg-white border rounded-md shadow-sm">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-green-500" 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>
<p class="ml-3 text-sm font-bold text-green-600">Successfully Toast Message !</p>
</div>
<span @click="nofifiction=false;" class="inline-flex items-center cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-600" 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>
</span>
</div>
<div class="container mx-auto mt-20 ml-20">
<button @click="nofifiction =!nofifiction" class="px-6 py-2 text-blue-100 bg-blue-700 rounded">Show
Nofifiction</button>
</div>
</div>
</div>
</body>
</html>
top right side toast
tailwind with alpinejs toast notification with top right side.
<div x-data="{ nofifiction: false }" class="fixed top-0 right-0">
<div x-show="nofifiction" x-transition
class="flex items-center justify-between max-w-xs p-4 bg-white border rounded-md shadow-sm">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-green-500" 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>
<p class="ml-3 text-sm font-bold text-green-600">Successfully Toast Message !</p>
</div>
<span @click="nofifiction=false;" class="inline-flex items-center cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-600" 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>
</span>
</div>
<div class="container mx-auto mt-20 ml-20">
<button @click="nofifiction =!nofifiction" class="px-6 py-2 text-blue-100 bg-blue-700 rounded">Show
Nofifiction</button>
</div>
</div>
tailwind with alpinejs toast notification with bottom right side.
<!-- bottom toast -->
<div x-data="{ nofifiction: true }" class="fixed bottom-0 left-0">
<div x-show="nofifiction" x-transition
class="flex items-center justify-between max-w-xs p-4 bg-white border rounded-md shadow-sm">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-green-500" 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>
<p class="ml-3 text-sm font-bold text-green-600">Successfully Toast Message !</p>
</div>
<span @click="nofifiction=false;" class="inline-flex items-center cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-600" 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>
</span>
</div>
</div>
Example 4
Tailwind CSS with alpinejs toast message with seTtimeout with alpinejs
<div x-data="{ nofifiction: false }"
x-init="$watch('nofifiction', function(value){ if(value){ setTimeout(function(){ nofifiction=false; }, 4000) } })"
class="fixed top-0 left-0">
<div x-show="nofifiction" x-transition
class="flex items-center justify-between max-w-xs p-4 bg-white border rounded-md shadow-sm">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-green-500" 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>
<p class="ml-3 text-sm font-bold text-green-600">Successfully Toast Message !</p>
</div>
<span @click="nofifiction=false;" class="inline-flex items-center cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-600" 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>
</span>
</div>
<div class="container mx-auto mt-20 ml-20">
<button @click="nofifiction =!nofifiction" class="px-6 py-2 text-blue-100 bg-blue-700 rounded">Show
Nofifiction</button>
</div>
</div>
Read Also
Tailwind CSS 3 FAQ Accordion UI Example
Tailwind CSS 3 Alert Message Example
Tailwind CSS 3 Avatars Example
Tailwind CSS 3 Breadcrumb Example
Tailwind CSS Gradient Button Example
Tailwind CSS 3D Button Example
Tailwind CSS Loading Button Example
Tailwind CSS v3 Cards Examples
Tailwind CSS Checkbox Form Examples
Tailwind CSS Dropdowns (Menu) on Hover Example
Tailwind CSS Multiselect Dropdown Example
How to use dark mode toggle switch in Tailwind CSS 3
How to use @apply directive in Tailwind CSS
Tailwind CSS sticky header & fixed navbar example
Tailwind CSS Navbar UI Example
Tailwind CSS 3 Login Page UI Example
Tailwind CSS Login Modal Example
Tailwind CSS 3 Overlay Image Example
Tailwind CSS Thank You Page Example
Tailwind CSS Timeline UI Example
Tailwind CSS Responsive Footer Section Example
Tailwind CSS Background Image Header Example
