Tailwind CSS Toast
Tailwind Toast means push notifications to the users of the website and web applications.Toasts enhance the user interaction with great effect. Toasts are available in various styles, sizes, colors and positions.
These tailwind toast messages typically appear as small, temporary pop-up notifications that appear at the bottom or top of the screen, providing important information or feedback to the user without disrupting their workflow.
Requires Pagedone JS
To Use this Dismissable Toast it requires Pagedone UI package need to be included.
Default toast
This simple tailwind toast notification will have an icon and message in it. It
also can have a dismissable close button which can be implemented by
data-dismiss="alert" data attribute.
Your email has been sent
Your email has been sent
Your email has been sent
<div class="w-full">
<div class="flex items-center w-full max-w-sm py-5 px-6 text-gray-600 bg-white rounded-xl border border-gray-200 shadow-sm mb-4" role="alert">
<p class="text-base font-medium"> Your email has been sent </p>
<div class="ml-auto flex items-center space-x-3">
<button type="button" class="inline-flex justify-center items-center gap-2 text-indigo-600 font-semibold hover:underline"> Undo </button>
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center text-gray-400 transition-all duration-150 " data-dismiss="alert">
<span class="sr-only">Close</span>
<svg class="w-6 h-6 " viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 17L17 7M17 17L7 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
</div>
<div class="flex items-center w-full max-w-sm py-5 px-6 text-gray-600 bg-white rounded-xl border border-gray-200 shadow-sm mb-4" role="alert">
<div class="inline-flex space-x-3">
<svg class="w-5 h-5 text-gray-600" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.87669 5.83334L6.79903 9.07942C8.55721 10.1343 9.4363 10.6618 10.4021 10.6388C11.368 10.6158 12.221 10.0471 13.927 8.9098L18.1233 5.83334M8.33335 16.6667H11.6667C14.8094 16.6667 16.3807 16.6667 17.357 15.6904C18.3334 14.7141 18.3334 13.1427 18.3334 10C18.3334 6.85731 18.3334 5.28596 17.357 4.30965C16.3807 3.33334 14.8094 3.33334 11.6667 3.33334H8.33335C5.19066 3.33334 3.61931 3.33334 2.643 4.30965C1.66669 5.28596 1.66669 6.85731 1.66669 10C1.66669 13.1427 1.66669 14.7141 2.643 15.6904C3.61931 16.6667 5.19066 16.6667 8.33335 16.6667Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
<p class="text-base font-medium"> Your email has been sent </p>
</div>
<div class="ml-auto flex items-center space-x-3">
<button type="button" class="inline-flex justify-center items-center gap-2 text-indigo-600 font-semibold hover:underline"> Undo </button>
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center text-gray-400 transition-all duration-150 " data-dismiss="alert">
<span class="sr-only">Close</span>
<svg class="w-6 h-6 " viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 17L17 7M17 17L7 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
</div>
<div class="flex items-center w-full max-w-sm py-5 px-6 text-gray-600 bg-white rounded-xl border border-gray-200 shadow-sm " role="alert">
<div class="inline-flex space-x-3 items-center">
<span class="w-9 h-9 rounded-full bg-indigo-50 flex items-center justify-center">
<svg class="w-5 h-5 text-indigo-600" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.87669 5.83334L6.79903 9.07942C8.55721 10.1343 9.4363 10.6618 10.4021 10.6388C11.368 10.6158 12.221 10.0471 13.927 8.9098L18.1233 5.83334M8.33335 16.6667H11.6667C14.8094 16.6667 16.3807 16.6667 17.357 15.6904C18.3334 14.7141 18.3334 13.1427 18.3334 10C18.3334 6.85731 18.3334 5.28596 17.357 4.30965C16.3807 3.33334 14.8094 3.33334 11.6667 3.33334H8.33335C5.19066 3.33334 3.61931 3.33334 2.643 4.30965C1.66669 5.28596 1.66669 6.85731 1.66669 10C1.66669 13.1427 1.66669 14.7141 2.643 15.6904C3.61931 16.6667 5.19066 16.6667 8.33335 16.6667Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
</span>
<p class="text-base font-medium"> Your email has been sent </p>
</div>
<div class="ml-auto flex items-center space-x-3">
<button type="button" class="inline-flex justify-center items-center gap-2 text-indigo-600 font-semibold hover:underline"> Undo </button>
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center text-gray-400 transition-all duration-150 " data-dismiss="alert">
<span class="sr-only">Close</span>
<svg class="w-6 h-6 " viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 17L17 7M17 17L7 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
</div>
</div>Toast with description
This toast will have messages with detailed description.It also can have a dismissable close button which can be implemented by data-dismiss="alert" data attribute.
Pagedone update is available
We’ve added some new components and sections download it now
<div class="flex w-full max-w-sm py-5 px-6 bg-white rounded-xl border border-gray-200 shadow-sm mb-4 gap-4" role="alert">
<div class="block">
<h5 class="font-medium text-gray-900 mb-1">Pagedone update is available</h5>
<p class="text-sm font-medium text-gray-600"> We’ve added some new components and sections download it now </p>
</div>
<button type="button" class="inline-flex flex-shrink-0 justify-center text-gray-400 transition-all duration-150 " data-dismiss="alert">
<span class="sr-only">Close</span>
<svg class="w-6 h-6 " viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 17L17 7M17 17L7 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>Toast with icon
This tailwind css toast notification will have messages with detailed description and icons can be added.It also can have a dismissable close button which can be implemented by data-dismiss="alert" data attribute.
Pagedone update is available
We’ve added some new components and sections download it now
Pagedone update is available
We’ve added some new components and sections download it now
<div class="w-full">
<div class="flex w-full max-w-sm py-5 px-6 bg-white rounded-xl border border-gray-200 shadow-sm mb-4 gap-4" role="alert">
<div class="inline-flex space-x-3">
<span>
<svg class="w-5 h-5 text-gray-900" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.3333 4.07248V8.5181M18.3333 8.5181H13.7878M18.3333 8.5181L14.8181 5.28763C14.0039 4.49091 12.9966 3.9089 11.8903 3.59591C10.7839 3.28291 9.61444 3.24913 8.49109 3.49772C7.36774 3.74631 6.32708 4.26916 5.46622 5.0175C4.60536 5.76583 3.95236 6.71525 3.56814 7.77717M1.66663 15.9275V11.4818M1.66663 11.4818H6.21208M1.66663 11.4818L5.18178 14.7123C5.99598 15.509 7.00327 16.0911 8.10966 16.4041C9.21605 16.717 10.3855 16.7508 11.5088 16.5022C12.6322 16.2536 13.6728 15.7308 14.5337 14.9825C15.3946 14.2341 16.0476 13.2847 16.4318 12.2228" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<div class="block">
<h5 class="font-medium text-gray-900 mb-1">Pagedone update is available</h5>
<p class="text-sm font-medium text-gray-600"> We’ve added some new components and sections download it now </p>
</div>
</div>
<button type="button" class="inline-flex flex-shrink-0 justify-center text-gray-400 transition-all duration-150 " data-dismiss="alert">
<span class="sr-only">Close</span>
<svg class="w-6 h-6 " viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 17L17 7M17 17L7 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="flex w-full max-w-sm py-5 px-6 bg-white rounded-xl border border-gray-200 shadow-sm mb-4 gap-4" role="alert">
<div class="inline-flex space-x-3">
<span class="bg-indigo-50 w-9 h-9 rounded-full flex-shrink-0 flex justify-center items-center">
<svg class="w-5 h-5 text-indigo-600" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.3333 4.07248V8.5181M18.3333 8.5181H13.7878M18.3333 8.5181L14.8181 5.28763C14.0039 4.49091 12.9966 3.9089 11.8903 3.59591C10.7839 3.28291 9.61444 3.24913 8.49109 3.49772C7.36774 3.74631 6.32708 4.26916 5.46622 5.0175C4.60536 5.76583 3.95236 6.71525 3.56814 7.77717M1.66663 15.9275V11.4818M1.66663 11.4818H6.21208M1.66663 11.4818L5.18178 14.7123C5.99598 15.509 7.00327 16.0911 8.10966 16.4041C9.21605 16.717 10.3855 16.7508 11.5088 16.5022C12.6322 16.2536 13.6728 15.7308 14.5337 14.9825C15.3946 14.2341 16.0476 13.2847 16.4318 12.2228" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<div class="block">
<h5 class="font-medium text-gray-900 mb-1">Pagedone update is available</h5>
<p class="text-sm font-medium text-gray-600"> We’ve added some new components and sections download it now </p>
</div>
</div>
<button type="button" class="inline-flex flex-shrink-0 justify-center text-gray-400 transition-all duration-150 " data-dismiss="alert">
<span class="sr-only">Close</span>
<svg class="w-6 h-6 " viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 17L17 7M17 17L7 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
</div>Toast with avatar
This toast tailwind component can be used to show messages and a CTA button when receiveing chat messages, comment notifications, and other use cases.
Harsh sent you an invite
Harsh sent you an invite to the pagedone signup and get reward
<div class="flex w-full max-w-sm py-5 px-6 bg-white rounded-xl border border-gray-200 shadow-sm mb-4 gap-4" role="alert">
<div class="inline-flex space-x-3">
<span class="flex-shrink-0">
<img src="https://pagedone.io/asset/uploads/1704275541.png" alt="Harsh image" class="w-12 h-12 rounded-full " />
</span>
<div class="block">
<h5 class="font-medium text-gray-900 mb-1">Harsh sent you an invite</h5>
<p class="text-sm font-medium text-gray-600"> Harsh sent you an invite to the pagedone signup and get reward </p>
</div>
</div>
<button type="button" class="inline-flex flex-shrink-0 justify-center text-gray-400 transition-all duration-150 " data-dismiss="alert">
<span class="sr-only">Close</span>
<svg class="w-6 h-6 " viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 17L17 7M17 17L7 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>Toast with size
This tailwind toast example can be used to show messages and a CTA button when receiveing chat messages, comment notifications, and other use cases.
Harsh sent you an invite
Harsh sent you an invite to the pagedone signup and get reward
<div class="flex w-full max-w-sm py-5 px-6 bg-white rounded-xl border border-gray-200 shadow-sm mb-4 gap-4" role="alert">
<div class="inline-flex space-x-3">
<span class="flex-shrink-0">
<img src="https://pagedone.io/asset/uploads/1704275541.png" alt="Harsh image" class="w-16 h-16 rounded-full " />
</span>
<div class="block">
<h5 class="font-medium text-gray-900 mb-1">Harsh sent you an invite</h5>
<p class="text-sm font-medium text-gray-600"> Harsh sent you an invite to the pagedone signup and get reward </p>
</div>
</div>
<button type="button" class="inline-flex flex-shrink-0 justify-center text-gray-400 transition-all duration-150 " data-dismiss="alert">
<span class="sr-only">Close</span>
<svg class="w-6 h-6 " viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 17L17 7M17 17L7 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>Interactive toast
Interactive tailwind ui toasts are used where the user is encouraged to take one action out of the two available actions. It is generally presented with two buttons. eg. Update the current version of the software or do it later.
Pagedone update is available
We’ve added some new components and sections download it now
Harsh sent you an invite
Harsh sent you an invite to the pagedone signup and get reward
<div class="flex w-full max-w-sm py-5 px-6 bg-white rounded-xl border border-gray-200 shadow-sm mb-4 gap-4" role="alert">
<div class="block">
<h5 class="font-medium text-gray-900 mb-1">Pagedone update is available</h5>
<p class="text-sm font-medium text-gray-600 mb-4"> We’ve added some new components and sections download it now </p>
<div class="inline-flex space-x-3">
<a href="javascript:;" class="text-sm font-semibold text-gray-900">Remind later</a>
<a href="javascript:;" class="text-sm font-semibold text-indigo-600">Download now</a>
</div>
</div>
<button type="button" class="inline-flex flex-shrink-0 justify-center text-gray-400 transition-all duration-150 " data-dismiss="alert">
<span class="sr-only">Close</span>
<svg class="w-6 h-6 " viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 17L17 7M17 17L7 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="flex w-full max-w-sm py-5 px-6 bg-white rounded-xl border border-gray-200 shadow-sm mb-4 gap-4" role="alert">
<div class="inline-flex space-x-3">
<span class="flex-shrink-0">
<img src="https://pagedone.io/asset/uploads/1704275541.png" alt="Harsh image" class="w-12 h-12 rounded-full " />
</span>
<div class="block">
<h5 class="font-medium text-gray-900 mb-1">Harsh sent you an invite</h5>
<p class="text-sm font-medium text-gray-600 mb-4"> Harsh sent you an invite to the pagedone signup and get reward </p>
<div class="inline-flex space-x-3">
<a href="javascript:;" class="text-sm font-semibold text-gray-900">Remind later</a>
<a href="javascript:;" class="text-sm font-semibold text-indigo-600">Download now</a>
</div>
</div>
</div>
<button type="button" class="inline-flex flex-shrink-0 justify-center text-gray-400 transition-all duration-150 " data-dismiss="alert">
<span class="sr-only">Close</span>
<svg class="w-6 h-6 " viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 17L17 7M17 17L7 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>Basic toast
This style of tailwind toast message will show a simple message without any interactive button.
At times there is a possibility of the user making a mistake which needs to be reversed. By using the following undo button you can help the user reverse the action.
Your email has been sent
Pagedone update is available
We’ve added some new components and sections download it now
Pagedone update is available
We’ve added some new components and sections download it now
<div class="flex w-full max-w-sm py-5 px-6 bg-white rounded-xl border border-gray-200 shadow-sm mb-4 gap-4" role="alert">
<p class="font-medium text-gray-600"> Your email has been sent </p>
<button type="button" class="ml-auto inline-flex justify-center items-center gap-2 text-indigo-600 font-semibold hover:underline"> Undo </button>
</div>
<div class="flex w-full max-w-sm py-5 px-6 bg-white rounded-xl border border-gray-200 shadow-sm mb-4 gap-4" role="alert">
<div class="block">
<h5 class="font-medium text-gray-900 mb-1">Pagedone update is available</h5>
<p class="text-sm font-medium text-gray-600"> We’ve added some new components and sections download it now </p>
</div>
</div>
<div class="flex w-full max-w-sm py-5 px-6 bg-white rounded-xl border border-gray-200 shadow-sm gap-4" role="alert">
<div class="block">
<h5 class="font-medium text-gray-900 mb-1">Pagedone update is available</h5>
<p class="text-sm font-medium text-gray-600 mb-4"> We’ve added some new components and sections download it now </p>
<div class="inline-flex space-x-3">
<a href="javascript:;" class="text-sm font-semibold text-gray-900">Remind later</a>
<a href="javascript:;" class="text-sm font-semibold text-indigo-600">Download now</a>
</div>
</div>
</div>