Tailwind CSS Toast

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

Basic Example

To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use display:flex , allowing easy alignment of content thanks to our margin and flexbox utilities. 

<div aria-live="assertive" aria-atomic="true" class="toast fade show border border-gray-300 flex flex-col w-full max-w-xs text-gray-500 bg-white rounded-lg" role="alert">
  <div class="flex items-center justify-between w-full border-b border-gray-300 px-3 py-2">
     <h4 class="text-gray-800 text-base">Tailwind CSS</h4>
     <button type="button" class="btn-close text-inherit" data-bs-dismiss="toast" aria-label="Close">
        <svg
           xmlns="http://www.w3.org/2000/svg"
           class="icon icon-tabler icon-tabler-x text-gray-700"
           width="16"
           height="16"
           viewBox="0 0 24 24"
           stroke-width="2"
           stroke="currentColor"
           fill="none"
           stroke-linecap="round"
           stroke-linejoin="round"
           >
           <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
           <path d="M18 6l-12 12"></path>
           <path d="M6 6l12 12"></path>
        </svg>
     </button>
  </div>
  <div class="p-3">
     <p>Hello, world! This is a toast message.</p>
  </div>
</div>

Live Toast

Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default.

<button
		type="button"
		class="btn bg-green-600 text-white border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:bg-green-800 hover:border-green-800 active:bg-green-800 active:border-green-800 focus:outline-none focus:ring-4 focus:ring-green-300"
		id="liveToastBtn"
		>
 Show live toast
 </button>
 <div class="toast-container fixed bottom-0 right-0 p-3 z-50">
		<div
			 id="liveToast"
			 aria-live="assertive"
			 aria-atomic="true"
			 class="toast border border-gray-300 flex flex-col w-full max-w-xs text-gray-500 bg-white rounded-lg"
			 role="alert"
			 >
			 <div class="flex items-center justify-between w-full border-b border-gray-300 px-3 py-2">
					<h4 class="text-gray-800 text-base">Tailwind CSS</h4>
					<button type="button" class="btn-close text-inherit" data-bs-dismiss="toast" aria-label="Close">
						 <svg
								xmlns="http://www.w3.org/2000/svg"
								class="icon icon-tabler icon-tabler-x text-gray-700"
								width="16"
								height="16"
								viewBox="0 0 24 24"
								stroke-width="2"
								stroke="currentColor"
								fill="none"
								stroke-linecap="round"
								stroke-linejoin="round"
								>
								<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
								<path d="M18 6l-12 12"></path>
								<path d="M6 6l12 12"></path>
						 </svg>
					</button>
			 </div>
			 <div class="p-3">
					<p>Hello, world! This is a toast message.</p>
			 </div>
		</div>
 </div>