Chat List

Show All

  • A
  • B
  • D
  • J
  • O
Chat with Khelesh

Online

  • View profile
  • Add to btn-close friends
  • Add to group
  • Block
Hi, how are you samim? 8:40 AM, Today
Hi Khalid i am good tnx how about you? 8:55 AM, Today
I am good too, thank you for your chat template 9:00 AM, Today
You are welcome 9:05 AM, Today
I am looking for your next templates 9:07 AM, Today
Ok, thank you have a good day 9:10 AM, Today
Bye, see you 9:12 AM, Today
Hi, how are you samim? 8:40 AM, Today
Hi Khalid i am good tnx how about you? 8:55 AM, Today
I am good too, thank you for your chat template 9:00 AM, Today
You are welcome 9:05 AM, Today
I am looking for your next templates 9:07 AM, Today
Ok, thank you have a good day 9:10 AM, Today
Bye, see you 9:12 AM, Today
Notications

Show All

  • SEVER STATUS
  • KK
  • SOCIAL
  • RU
  • SEVER STATUS
  • AU
  • MO
Notes

Show All

Create Workout Plan Now

Gymove Fitness Admin Dashboard © 2023 All Rights Reserved

Made with by DexignZone

  1. Toasts

  2. Home
  3. Toasts

Toasts.

Make use of Tailwind's unique Toasts styles to display elegant, non-intrusive alerts that seamlessly integrate into your website's design. It create interactive notifications that improve the usability and feedback mechanisms of your application.

Toasts

Toast Basic example

Tailwind 11 mins ago
Hello, world! This is a toast message. 
															
<div class="toast sm:w-87.5 text-sm border border-bordercolor rounded-xl shadow-toast overflow-hidden show">
	<div class="flex items-center py-2 px-3 border-b border-bordercolor">
		<?xml version="1.0" encoding="UTF-8"?>
		<svg class="me-2" width="15px" height="15px" version="1.1" viewBox="-1 0 30 30" xmlns="http://www.w3.org/2000/svg">
		<g fill="none" fill-rule="evenodd">
		<g transform="translate(-362 -880)" fill="var(--color-primary)">
		<path d="m365 904 3-6v-8c0-4.418 3.582-8 8-8s8 3.582 8 8v8l3 6h-22zm11 4c-1.305 0-2.403-0.837-2.816-2h5.632c-0.413 1.163-1.511 2-2.816 2zm10-10v-8c0-5.522-4.478-10-10-10s-10 4.478-10 10v8l-4 8h9.101c0.463 2.282 2.48 4 4.899 4s4.436-1.718 4.899-4h9.101l-4-8z"></path>
		</g>
		</g>
		</svg>
	<strong class="me-auto">Tailwind</strong>
	<small>11 mins ago</small>
	<button type="button" class="btn-close ml-2.5 p-2 dark:invert"></button>
	</div>
	<div class="p-3 wrap-break-word">
	Hello, world! This is a toast message.
	</div>
</div>

Stacking Toasts

Tailwind just now
See? Just like this.
Tailwind 2 seconds ago
Heads up, toasts will stack automatically
Tailwind 5 minutes ago
See? Just like this.
Tailwind 8 seconds ago
Heads up, toasts will stack automatically 
															
<div class="toast sm:w-87.5 text-sm border border-bordercolor rounded-xl shadow-toast overflow-hidden show mb-4">
	<div class="flex items-center py-2 px-3 border-b border-bordercolor">
		<?xml version="1.0" encoding="UTF-8"?>
		<svg class="me-2" width="15px" height="15px" version="1.1" viewBox="-1 0 30 30" xmlns="http://www.w3.org/2000/svg">
		<g fill="none" fill-rule="evenodd">
		<g transform="translate(-362 -880)" fill="var(--color-primary)">
		<path d="m365 904 3-6v-8c0-4.418 3.582-8 8-8s8 3.582 8 8v8l3 6h-22zm11 4c-1.305 0-2.403-0.837-2.816-2h5.632c-0.413 1.163-1.511 2-2.816 2zm10-10v-8c0-5.522-4.478-10-10-10s-10 4.478-10 10v8l-4 8h9.101c0.463 2.282 2.48 4 4.899 4s4.436-1.718 4.899-4h9.101l-4-8z"></path>
		</g>
		</g>
		</svg>
		<strong class="me-auto">Tailwind</strong>
		<small>just now</small>
		<button type="button" class="btn-close ml-2.5 p-2 dark:invert"></button>
	</div>
	<div class="p-3 wrap-break-word">
		See? Just like this.
	</div>
</div>

<div class="toast sm:w-87.5 text-sm border border-bordercolor rounded-xl shadow-toast overflow-hidden show mb-4">
	<div class="flex items-center py-2 px-3 border-b border-bordercolor">
		<?xml version="1.0" encoding="UTF-8"?>
		<svg class="me-2" width="15px" height="15px" version="1.1" viewBox="-1 0 30 30" xmlns="http://www.w3.org/2000/svg">
		<g fill="none" fill-rule="evenodd">
		<g transform="translate(-362 -880)" fill="var(--color-secondary)">
		<path d="m365 904 3-6v-8c0-4.418 3.582-8 8-8s8 3.582 8 8v8l3 6h-22zm11 4c-1.305 0-2.403-0.837-2.816-2h5.632c-0.413 1.163-1.511 2-2.816 2zm10-10v-8c0-5.522-4.478-10-10-10s-10 4.478-10 10v8l-4 8h9.101c0.463 2.282 2.48 4 4.899 4s4.436-1.718 4.899-4h9.101l-4-8z"></path>
		</g>
		</g>
		</svg>
		<strong class="me-auto">Tailwind</strong>
		<small>2 seconds ago</small>
		<button type="button" class="btn-close ml-2.5 p-2 dark:invert"></button>
	</div>
<div class="p-3 wrap-break-word">
	Heads up, toasts will stack automatically
</div>
</div>

<div class="toast sm:w-87.5 text-sm border border-bordercolor rounded-xl shadow-toast overflow-hidden show mb-4">
	<div class="flex items-center py-2 px-3 border-b border-bordercolor">
		<?xml version="1.0" encoding="UTF-8"?>
		<svg class="me-2" width="15px" height="15px" version="1.1" viewBox="-1 0 30 30"
			xmlns="http://www.w3.org/2000/svg">
			<g fill="none" fill-rule="evenodd">
				<g transform="translate(-362 -880)" fill="#2BC155">
					<path
						d="m365 904 3-6v-8c0-4.418 3.582-8 8-8s8 3.582 8 8v8l3 6h-22zm11 4c-1.305 0-2.403-0.837-2.816-2h5.632c-0.413 1.163-1.511 2-2.816 2zm10-10v-8c0-5.522-4.478-10-10-10s-10 4.478-10 10v8l-4 8h9.101c0.463 2.282 2.48 4 4.899 4s4.436-1.718 4.899-4h9.101l-4-8z">
					</path>
				</g>
			</g>
		</svg>
		<strong class="me-auto">Tailwind</strong>
		<small>5 minutes ago</small>
		<button type="button" class="btn-close ml-2.5 p-2 dark:invert"></button>
	</div>
	<div class="p-3 wrap-break-word">
		See? Just like this.
	</div>
</div>

<div class="toast sm:w-87.5 text-sm border border-bordercolor rounded-xl shadow-toast overflow-hidden show mb-4">
	<div class="flex items-center py-2 px-3 border-b border-bordercolor">
		<?xml version="1.0" encoding="UTF-8"?>
		<svg class="me-2" width="15px" height="15px" version="1.1" viewBox="-1 0 30 30"
			xmlns="http://www.w3.org/2000/svg">
			<g fill="none" fill-rule="evenodd">
				<g transform="translate(-362 -880)" fill="#FF2E2E">
					<path
						d="m365 904 3-6v-8c0-4.418 3.582-8 8-8s8 3.582 8 8v8l3 6h-22zm11 4c-1.305 0-2.403-0.837-2.816-2h5.632c-0.413 1.163-1.511 2-2.816 2zm10-10v-8c0-5.522-4.478-10-10-10s-10 4.478-10 10v8l-4 8h9.101c0.463 2.282 2.48 4 4.899 4s4.436-1.718 4.899-4h9.101l-4-8z">
					</path>
				</g>
			</g>
		</svg>
		<strong class="me-auto">Tailwind</strong>
		<small>8 seconds ago</small>
		<button type="button" class="btn-close ml-2.5 p-2 dark:invert"></button>
	</div>
	<div class="p-3 wrap-break-word">
		Heads up, toasts will stack automatically
	</div>
</div>

Toast Color Scheme

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.
Hello, world! This is a toast message. 
															
<div class="toast sm:w-87.5 text-sm border border-bordercolor rounded-xl shadow-toast overflow-hidden show items-center mb-4">
	<div class="flex">
		<div class="p-3 wrap-break-word">
			Hello, world! This is a toast message.
		</div>
		<button type="button" class="btn-close ml-auto p-2 dark:invert"></button>
	</div>
</div>
<div class="toast sm:w-87.5 text-sm rounded-xl show items-center text-white bg-primary mb-4">
	<div class="flex">
		<div class="p-3 wrap-break-word">
			Hello, world! This is a toast message.
		</div>
		<button type="button" class="btn-close ml-auto p-2 invert"></button>
	</div>
</div>
<div class="toast sm:w-87.5 text-sm rounded-xl show items-center text-white bg-dark mb-4">
	<div class="flex">
		<div class="p-3 wrap-break-word">
			Hello, world! This is a toast message.
		</div>
		<button type="button" class="btn-close ml-auto p-2 invert"></button>
	</div>
</div>
<div class="toast sm:w-87.5 text-sm rounded-xl show items-center text-white bg-success mb-4">
	<div class="flex">
		<div class="p-3 wrap-break-word">
			Hello, world! This is a toast message.
		</div>
		<button type="button" class="btn-close ml-auto p-2 invert"></button>
	</div>
</div>
<div class="toast sm:w-87.5 text-sm rounded-xl show items-center text-white bg-danger mb-4">
	<div class="flex">
		<div class="p-3 wrap-break-word">
			Hello, world! This is a toast message.
		</div>
		<button type="button" class="btn-close ml-auto p-2 invert"></button>
	</div>
</div>
<div class="toast sm:w-87.5 text-sm rounded-xl show items-center text-white bg-info mb-4">
	<div class="flex">
		<div class="p-3 wrap-break-word">
			Hello, world! This is a toast message.
		</div>
		<button type="button" class="btn-close ml-auto p-2 invert"></button>
	</div>
</div>
<div class="toast sm:w-87.5 text-sm rounded-xl show items-center text-white bg-warning mb-4">
	<div class="flex">
		<div class="p-3 wrap-break-word">
			Hello, world! This is a toast message.
		</div>
		<button type="button" class="btn-close ml-auto p-2 invert"></button>
	</div>
</div>

button Toasts

Tailwind just now
Hello, world! This is a toast message.
Tailwind 2 seconds ago
Hello, world! This is a toast message.
Tailwind 5 minutes ago
Hello, world! This is a toast message. 
															
<div class="toast sm:w-87.5 text-sm border border-bordercolor rounded-xl shadow-toast overflow-hidden show mb-4">
	<div class="flex items-center py-2 px-3 border-b border-bordercolor">
		<?xml version="1.0" encoding="UTF-8"?>
		<svg class="me-2" width="15px" height="15px" version="1.1" viewBox="-1 0 30 30" xmlns="http://www.w3.org/2000/svg">
		<g fill="none" fill-rule="evenodd">
		<g transform="translate(-362 -880)" fill="var(--color-primary)">
		<path d="m365 904 3-6v-8c0-4.418 3.582-8 8-8s8 3.582 8 8v8l3 6h-22zm11 4c-1.305 0-2.403-0.837-2.816-2h5.632c-0.413 1.163-1.511 2-2.816 2zm10-10v-8c0-5.522-4.478-10-10-10s-10 4.478-10 10v8l-4 8h9.101c0.463 2.282 2.48 4 4.899 4s4.436-1.718 4.899-4h9.101l-4-8z"></path>
		</g>
		</g>
		</svg>
		<strong class="me-auto">Tailwind</strong>
		<small>just now</small>
		<button type="button" class="btn-close ml-2.5 p-2 dark:invert"></button>
	</div>
	<div class="p-3 wrap-break-word">
		Hello, world! This is a toast message.
		<div class="mt-2 pt-2 border-top">
		<button type="button" class="btn btn-primary btn-sm">Take action</button>
		<button type="button" class="btn btn-secondary btn-sm">Close</button>
		</div>
	</div>
	</div>
	
	<div class="toast sm:w-87.5 text-sm border border-bordercolor rounded-xl shadow-toast overflow-hidden show mb-4">
	<div class="flex items-center py-2 px-3 border-b border-bordercolor">
		<?xml version="1.0" encoding="UTF-8"?>
		<svg class="me-2" width="15px" height="15px" version="1.1" viewBox="-1 0 30 30" xmlns="http://www.w3.org/2000/svg">
		<g fill="none" fill-rule="evenodd">
		<g transform="translate(-362 -880)" fill="#2BC155">
		<path d="m365 904 3-6v-8c0-4.418 3.582-8 8-8s8 3.582 8 8v8l3 6h-22zm11 4c-1.305 0-2.403-0.837-2.816-2h5.632c-0.413 1.163-1.511 2-2.816 2zm10-10v-8c0-5.522-4.478-10-10-10s-10 4.478-10 10v8l-4 8h9.101c0.463 2.282 2.48 4 4.899 4s4.436-1.718 4.899-4h9.101l-4-8z"></path>
		</g>
		</g>
		</svg>
		<strong class="me-auto">Tailwind</strong>
		<small>2 seconds ago</small>
		<button type="button" class="btn-close ml-2.5 p-2 dark:invert"></button>
	</div>
	<div class="p-3 wrap-break-word">
		Hello, world! This is a toast message.
		<div class="mt-2 pt-2 border-top">
		<button type="button" class="btn hover:bg-successhover hover:shadow-btnsuccess btn-success btn-sm">Take action</button>
		<button type="button" class="btn btn-secondary btn-sm">Close</button>
		</div>
	</div>
	</div>
	
	<div class="toast sm:w-87.5 text-sm border border-bordercolor rounded-xl shadow-toast overflow-hidden show mb-4">
	<div class="flex items-center py-2 px-3 border-b border-bordercolor">
		<?xml version="1.0" encoding="UTF-8"?>
		<svg class="me-2" width="15px" height="15px" version="1.1" viewBox="-1 0 30 30" xmlns="http://www.w3.org/2000/svg">
		<g fill="none" fill-rule="evenodd">
		<g transform="translate(-362 -880)" fill="#FF2E2E">
		<path d="m365 904 3-6v-8c0-4.418 3.582-8 8-8s8 3.582 8 8v8l3 6h-22zm11 4c-1.305 0-2.403-0.837-2.816-2h5.632c-0.413 1.163-1.511 2-2.816 2zm10-10v-8c0-5.522-4.478-10-10-10s-10 4.478-10 10v8l-4 8h9.101c0.463 2.282 2.48 4 4.899 4s4.436-1.718 4.899-4h9.101l-4-8z"></path>
		</g>
		</g>
		</svg>
		<strong class="me-auto">Tailwind</strong>
		<small>5 minutes ago</small>
		<button type="button" class="btn-close ml-2.5 p-2 dark:invert"></button>
	</div>
	<div class="p-3 wrap-break-word">
		Hello, world! This is a toast message.
		<div class="mt-2 pt-2 border-top">
		<button type="button" class="btn btn-danger btn-sm">Take action</button>
		<button type="button" class="btn btn-secondary btn-sm">Close</button>
		</div>
	</div>
</div>

Solid Background Toast

Tailwind 11 mins ago
Hello, world! This is a toast message.
Tailwind 11 mins ago
Hello, world! This is a toast message.
Tailwind 11 mins ago
Hello, world! This is a toast message.
Tailwind 11 mins ago
Hello, world! This is a toast message. 
															
<div class="toast sm:w-87.5 text-sm border border-bordercolor rounded-xl shadow-toast overflow-hidden mb-6 show">
	<div class="flex items-center py-2 px-3 border-b border-bordercolor bg-primary text-white">
		<strong class="me-auto">Tailwind</strong>
		<small>11 mins ago</small>
		<button type="button" class="btn-close ml-2.5 p-2 invert"></button>
	</div>
	<div class="p-3 wrap-break-word">
		Hello, world! This is a toast message.
	</div>
</div>
<div class="toast sm:w-87.5 text-sm border border-bordercolor rounded-xl shadow-toast overflow-hidden mb-6 show">
	<div class="flex items-center py-2 px-3 border-b border-bordercolor bg-dark text-white">
		<strong class="me-auto">Tailwind</strong>
		<small>11 mins ago</small>
		<button type="button" class="btn-close ml-2.5 p-2 invert"></button>
	</div>
	<div class="p-3 wrap-break-word">
		Hello, world! This is a toast message.
	</div>
</div>
<div class="toast sm:w-87.5 text-sm border border-bordercolor rounded-xl shadow-toast overflow-hidden mb-6 show">
	<div class="flex items-center py-2 px-3 border-b border-bordercolor bg-success text-white">
		<strong class="me-auto">Tailwind</strong>
		<small>11 mins ago</small>
		<button type="button" class="btn-close ml-2.5 p-2 invert"></button>
	</div>
	<div class="p-3 wrap-break-word">
		Hello, world! This is a toast message.
	</div>
</div>
<div class="toast sm:w-87.5 text-sm border border-bordercolor rounded-xl shadow-toast overflow-hidden show">
	<div class="flex items-center py-2 px-3 border-b border-bordercolor bg-danger text-white">
		<strong class="me-auto">Tailwind</strong>
		<small>11 mins ago</small>
		<button type="button" class="btn-close ml-2.5 p-2 invert"></button>
	</div>
	<div class="p-3 wrap-break-word">
		Hello, world! This is a toast message.
	</div>
</div>
Quick Actions
    Help