Components
- Tailwind CSS Accordion
- Tailwind CSS Alert
- Tailwind CSS Avatar
- Dropdown example
- Dropdown hover
- Delay duration
- Dropdown divider
- carousels
- date Picker
- lists
- lists Group
- Legend indicator
- Progress
- Skelton
- Tailwind Css Ratings
- Tailwind css Spinners
- Tailwind Css Icons staick
- Tailwind Css Stipper
- Tailwind Css Toats
- Dropdown with checkbox
- Background hover
- Tailwind css Timeline
- Helper text
- navBar
- Section
- Tabs
Tailwind Css Toats
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
Example
Copied!
This is a normal message.
This is a success message.
This is an error message.
This is a warning message.
<!-- Toast -->
<div class="max-w-xs bg-white border border-gray-200 rounded-xl shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
<div class="flex p-4">
<div class="flex-shrink-0">
<svg class="flex-shrink-0 size-4 text-blue-500 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
</svg>
</div>
<div class="ms-3">
<p class="text-sm text-gray-700 dark:text-gray-400">
This is a normal message.
</p>
</div>
</div>
</div>
<!-- End Toast -->
<!-- Toast -->
<div class="max-w-xs bg-white border border-gray-200 rounded-xl shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
<div class="flex p-4">
<div class="flex-shrink-0">
<svg class="flex-shrink-0 size-4 text-teal-500 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path>
</svg>
</div>
<div class="ms-3">
<p class="text-sm text-gray-700 dark:text-gray-400">
This is a success message.
</p>
</div>
</div>
</div>
<!-- End Toast -->
<!-- Toast -->
<div class="max-w-xs bg-white border border-gray-200 rounded-xl shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
<div class="flex p-4">
<div class="flex-shrink-0">
<svg class="flex-shrink-0 size-4 text-red-500 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"></path>
</svg>
</div>
<div class="ms-3">
<p class="text-sm text-gray-700 dark:text-gray-400">
This is an error message.
</p>
</div>
</div>
</div>
<!-- End Toast -->
<!-- Toast -->
<div class="max-w-xs bg-white border border-gray-200 rounded-xl shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
<div class="flex p-4">
<div class="flex-shrink-0">
<svg class="flex-shrink-0 size-4 text-yellow-500 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path>
</svg>
</div>
<div class="ms-3">
<p class="text-sm text-gray-700 dark:text-gray-400">
This is a warning message.
</p>
</div>
</div>
</div>
<!-- End Toast -->
Condensed
Copied!
Your email has been sent
<!-- Toast -->
<div class="hs-removing:translate-x-5 hs-removing:opacity-0 transition duration-300 max-w-xs bg-white border border-gray-200 rounded-xl shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
<div class="flex p-4">
<p class="text-sm text-gray-700 dark:text-gray-400">
Your email has been sent
</p>
<div class="ms-auto flex items-center space-x-3">
<button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-blue-600 hover:text-blue-800 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:text-blue-800 dark:text-blue-500 dark:focus:text-blue-400">
Undo
</button>
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center size-5 rounded-lg text-gray-800 opacity-50 hover:opacity-100 focus:outline-none focus:opacity-100 dark:text-white">
<span class="sr-only">Close</span>
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- End Toast -->
Solid color variants
Copied!
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
<!-- Toast -->
<div class="max-w-xs bg-gray-800 text-sm text-white rounded-xl shadow-lg dark:bg-gray-900" role="alert">
<div class="flex p-4">
Hello, world! This is a toast message.
<div class="ms-auto">
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center size-5 rounded-lg text-white hover:text-white opacity-50 hover:opacity-100 focus:outline-none focus:opacity-100">
<span class="sr-only">Close</span>
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- End Toast -->
<!-- Toast -->
<div class="max-w-xs bg-gray-500 text-sm text-white rounded-xl shadow-lg dark:bg-gray-700" role="alert">
<div class="flex p-4">
Hello, world! This is a toast message.
<div class="ms-auto">
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center size-5 rounded-lg text-white hover:text-white opacity-50 hover:opacity-100 focus:outline-none focus:opacity-100">
<span class="sr-only">Close</span>
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- End Toast -->
<!-- Toast -->
<div class="max-w-xs bg-teal-500 text-sm text-white rounded-xl shadow-lg" role="alert">
<div class="flex p-4">
Hello, world! This is a toast message.
<div class="ms-auto">
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center size-5 rounded-lg text-white hover:text-white opacity-50 hover:opacity-100 focus:outline-none focus:opacity-100">
<span class="sr-only">Close</span>
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- End Toast -->
<!-- Toast -->
<div class="max-w-xs bg-blue-500 text-sm text-white rounded-xl shadow-lg" role="alert">
<div class="flex p-4">
Hello, world! This is a toast message.
<div class="ms-auto">
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center size-5 rounded-lg text-white hover:text-white opacity-50 hover:opacity-100 focus:outline-none focus:opacity-100">
<span class="sr-only">Close</span>
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- End Toast -->
<!-- Toast -->
<div class="max-w-xs bg-red-500 text-sm text-white rounded-xl shadow-lg" role="alert">
<div class="flex p-4">
Hello, world! This is a toast message.
<div class="ms-auto">
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center size-5 rounded-lg text-white hover:text-white opacity-50 hover:opacity-100 focus:outline-none focus:opacity-100">
<span class="sr-only">Close</span>
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- End Toast -->
<!-- Toast -->
<div class="max-w-xs bg-yellow-500 text-sm text-white rounded-xl shadow-lg" role="alert">
<div class="flex p-4">
Hello, world! This is a toast message.
<div class="ms-auto">
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center size-5 rounded-lg text-white hover:text-white opacity-50 hover:opacity-100 focus:outline-none focus:opacity-100">
<span class="sr-only">Close</span>
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- End Toast -->
Soft color variants
Copied!
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
<!-- Toast -->
<div class="max-w-xs bg-gray-100 border border-gray-200 text-sm text-gray-800 rounded-lg dark:bg-white/10 dark:border-white/20 dark:text-white" role="alert">
<div class="flex p-4">
Hello, world! This is a toast message.
<div class="ms-auto">
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center size-5 rounded-lg text-gray-800 opacity-50 hover:opacity-100 focus:outline-none focus:opacity-100 dark:text-white">
<span class="sr-only">Close</span>
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- End Toast -->
<!-- Toast -->
<div class="max-w-xs bg-gray-50 border border-gray-200 text-sm text-gray-600 rounded-lg dark:bg-white/[.05] dark:border-white/10 dark:text-gray-400" role="alert">
<div class="flex p-4">
Hello, world! This is a toast message.
<div class="ms-auto">
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center size-5 rounded-lg text-gray-800 opacity-50 hover:opacity-100 focus:outline-none focus:opacity-100 dark:text-white">
<span class="sr-only">Close</span>
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- End Toast -->
<!-- Toast -->
<div class="max-w-xs bg-teal-100 border border-teal-200 text-sm text-teal-800 rounded-lg dark:bg-teal-800/10 dark:border-teal-900 dark:text-teal-500" role="alert">
<div class="flex p-4">
Hello, world! This is a toast message.
<div class="ms-auto">
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center size-5 rounded-lg text-teal-800 opacity-50 hover:opacity-100 focus:outline-none focus:opacity-100 dark:text-teal-200">
<span class="sr-only">Close</span>
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- End Toast -->
<!-- Toast -->
<div class="max-w-xs bg-blue-100 border border-blue-200 text-sm text-blue-800 rounded-lg dark:bg-blue-800/10 dark:border-blue-900 dark:text-blue-500" role="alert">
<div class="flex p-4">
Hello, world! This is a toast message.
<div class="ms-auto">
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center size-5 rounded-lg text-blue-800 opacity-50 hover:opacity-100 focus:outline-none focus:opacity-100 dark:text-blue-200">
<span class="sr-only">Close</span>
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- End Toast -->
<!-- Toast -->
<div class="max-w-xs bg-red-100 border border-red-200 text-sm text-red-800 rounded-lg dark:bg-red-800/10 dark:border-red-900 dark:text-red-500" role="alert">
<div class="flex p-4">
Hello, world! This is a toast message.
<div class="ms-auto">
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center size-5 rounded-lg text-red-800 opacity-50 hover:opacity-100 focus:outline-none focus:opacity-100 dark:text-red-200">
<span class="sr-only">Close</span>
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- End Toast -->
<!-- Toast -->
<div class="max-w-xs bg-yellow-100 border border-yellow-200 text-sm text-yellow-800 rounded-lg dark:bg-yellow-800/10 dark:border-yellow-900 dark:text-yellow-500" role="alert">
<div class="flex p-4">
Hello, world! This is a toast message.
<div class="ms-auto">
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center size-5 rounded-lg text-yellow-800 opacity-50 hover:opacity-100 focus:outline-none focus:opacity-100 dark:text-yellow-200">
<span class="sr-only">Close</span>
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- End Toast -->
Message with loading indicator
Copied!
Loading...
Action in progress
<!-- Toast -->
<div class="max-w-xs bg-white border border-gray-200 rounded-xl shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
<div class="flex items-center p-4">
<div class="animate-spin inline-block size-4 border-[3px] border-current border-t-transparent text-blue-600 rounded-full" role="status" aria-label="loading">
<span class="sr-only">Loading...</span>
</div>
<p class="ms-3 text-sm text-gray-700 dark:text-gray-400">
Action in progress
</p>
</div>
</div>
<!-- End Toast -->
With actions
Copied!
App notifications
Notifications may include alerts, sounds and icon badges.
<!-- Toast -->
<div class="max-w-xs bg-white border border-gray-200 rounded-xl shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
<div class="flex p-4">
<div class="flex-shrink-0">
<svg class="size-5 text-gray-600 mt-1 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"></path>
<path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"></path>
</svg>
</div>
<div class="ms-4">
<h3 class="text-gray-800 font-semibold dark:text-white">
App notifications
</h3>
<div class="mt-1 text-sm text-gray-600 dark:text-gray-400">
Notifications may include alerts, sounds and icon badges.
</div>
<div class="mt-4">
<div class="flex space-x-3">
<button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-blue-600 hover:text-blue-800 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:text-blue-800 dark:text-blue-500 dark:focus:text-blue-400">
Don't allow
</button>
<button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-blue-600 hover:text-blue-800 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:text-blue-800 dark:text-blue-500 dark:focus:text-blue-400">
Allow
</button>
</div>
</div>
</div>
</div>
</div>
<!-- End Toast -->
Stack
Copied!
App notifications
Notifications may include alerts, sounds and icon badges.
Your app preferences has been successfully updated.
<!-- Toast -->
<div class="max-w-xs bg-white border border-gray-200 rounded-xl shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
<div class="flex p-4">
<div class="flex-shrink-0">
<svg class="size-5 text-gray-600 mt-1 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"></path>
<path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"></path>
</svg>
</div>
<div class="ms-4">
<h3 class="text-gray-800 font-semibold dark:text-white">
App notifications
</h3>
<div class="mt-1 text-sm text-gray-600 dark:text-gray-400">
Notifications may include alerts, sounds and icon badges.
</div>
<div class="mt-4">
<div class="flex space-x-3">
<button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-blue-600 hover:text-blue-800 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:text-blue-800 dark:text-blue-500 dark:focus:text-blue-400">
Don't allow
</button>
<button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-blue-600 hover:text-blue-800 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:text-blue-800 dark:text-blue-500 dark:focus:text-blue-400">
Allow
</button>
</div>
</div>
</div>
</div>
</div>
<!-- End Toast -->
<!-- Toast -->
<div class="max-w-xs bg-white border border-gray-200 rounded-xl shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
<div class="flex p-4">
<div class="flex-shrink-0">
<svg class="flex-shrink-0 size-4 text-teal-500 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path>
</svg>
</div>
<div class="ms-3">
<p class="text-sm text-gray-700 dark:text-gray-400">
Your app preferences has been successfully updated.
</p>
</div>
</div>
</div>
<!-- End Toast -->
Progress
Copied!
Uploading 3 files
57% ยท 5 seconds left
<!-- Toast -->
<div class="max-w-xs relative bg-white border border-gray-200 rounded-xl shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
<div class="flex p-4">
<div class="flex-shrink-0">
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center size-8 rounded-full bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-400">
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"></path>
<path d="M12 12v9"></path>
<path d="m16 16-4-4-4 4"></path>
</svg>
</span>
<!-- End Icon -->
<button type="button" class="absolute top-3 end-3 inline-flex flex-shrink-0 justify-center items-center size-5 rounded-lg text-gray-800 opacity-50 hover:opacity-100 focus:outline-none focus:opacity-100 dark:text-white">
<span class="sr-only">Close</span>
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<div class="grow ms-3 me-5">
<h3 class="text-gray-800 font-medium text-sm dark:text-white">
Uploading 3 files
</h3>
<!-- Progress -->
<div class="mt-2 flex flex-col gap-x-3">
<span class="block mb-1.5 text-xs text-gray-500 dark:text-gray-400">57% · 5 seconds left</span>
<div class="flex w-full h-1 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100">
<div class="flex flex-col justify-center overflow-hidden bg-blue-600 text-xs text-white text-center whitespace-nowrap dark:bg-gray-200" style="width: 57%"></div>
</div>
</div>
<!-- End Progress -->
</div>
</div>
</div>
<!-- End Toast -->
Placement
Copied!
Top left
Top center
Top right
Center
Bottom left
Bottom center
Bottom right
<!-- Toast -->
<div class="absolute top-0 start-0">
<div class="max-w-xs bg-white border border-gray-200 rounded-xl shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
<div class="p-2 sm:p-4">
<h3 class="text-xs text-gray-800 font-semibold sm:text-base dark:text-white">
Top left
</h3>
</div>
</div>
</div>
<!-- End Toast -->
<!-- Toast -->
<div class="absolute top-0 start-1/2 -translate-x-1/2">
<div class="max-w-xs bg-white border border-gray-200 rounded-xl shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
<div class="p-2 sm:p-4">
<h3 class="text-xs text-gray-800 font-semibold sm:text-base dark:text-white">
Top center
</h3>
</div>
</div>
</div>
<!-- End Toast -->
<!-- Toast -->
<div class="absolute top-0 end-0">
<div class="max-w-xs bg-white border border-gray-200 rounded-xl shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
<div class="p-2 sm:p-4">
<h3 class="text-xs text-gray-800 font-semibold sm:text-base dark:text-white">
Top right
</h3>
</div>
</div>
</div>
<!-- End Toast -->
<!-- Toast -->
<div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
<div class="max-w-xs bg-white border border-gray-200 rounded-xl shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
<div class="p-2 sm:p-4">
<h3 class="text-xs text-gray-800 font-semibold sm:text-base dark:text-white">
Center
</h3>
</div>
</div>
</div>
<!-- End Toast -->
<!-- Toast -->
<div class="absolute bottom-0 start-0">
<div class="max-w-xs bg-white border border-gray-200 rounded-xl shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
<div class="p-2 sm:p-4">
<h3 class="text-xs text-gray-800 font-semibold sm:text-base dark:text-white">
Bottom left
</h3>
</div>
</div>
</div>
<!-- End Toast -->
<!-- Toast -->
<div class="absolute bottom-0 start-1/2 -translate-x-1/2">
<div class="max-w-xs bg-white border border-gray-200 rounded-xl shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
<div class="p-2 sm:p-4">
<h3 class="text-xs text-gray-800 font-semibold sm:text-base dark:text-white">
Bottom center
</h3>
</div>
</div>
</div>
<!-- End Toast -->
<!-- Toast -->
<div class="absolute bottom-0 end-0">
<div class="max-w-xs bg-white border border-gray-200 rounded-xl shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
<div class="p-2 sm:p-4">
<h3 class="text-xs text-gray-800 font-semibold sm:text-base dark:text-white">
Bottom right
</h3>
</div>
</div>
</div>
<!-- End Toast -->
Dismiss button
Copied!
Your email has been sent
<div x-data="{ open: true }"
x-show="open"
class="hs-removing:translate-x-5 hs-removing:opacity-0 transition duration-300 max-w-xs bg-white border border-gray-200 rounded-xl shadow-lg dark:bg-gray-800 dark:border-gray-700"
role="alert">
<div class="flex p-4">
<p x-show="open" class="text-sm text-gray-700 dark:text-gray-400">
Your email has been sent
</p>
<div class="ms-auto">
<button type="button"
@click="open = false"
class="inline-flex flex-shrink-0 justify-center items-center size-5 rounded-lg text-gray-800 opacity-50 hover:opacity-100 focus:outline-none focus:opacity-100 dark:text-white" >
<span class="sr-only">Close</span>
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div>