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

Live Documentation Help & getting started
Dark Mode
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-[350px] border border-border rounded-lg shadow-toast overflow-hidden show">
    <div class="flex items-center py-2 px-3 border-b border-border dark:bg-d-bg">
        <?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(--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 class="">11 mins ago</small>
    <button type="button" class="btn-close ml-2.5 p-2 dark:invert"></button>
    </div>
    <div class="p-3 break-words">
    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-[350px] border border-border rounded-lg shadow-toast overflow-hidden show mb-4">
    <div class="flex items-center py-2 px-3 border-b border-border dark:bg-d-bg">
        <?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(--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 class="">just now</small>
        <button type="button" class="btn-close ml-2.5 p-2 dark:invert"></button>
    </div>
    <div class="p-3 break-words">
        See? Just like this.
    </div>
</div>

<div class="toast sm:w-[350px] border border-border rounded-lg shadow-toast overflow-hidden show mb-4">
    <div class="flex items-center py-2 px-3 border-b border-border dark:bg-d-bg">
        <?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(--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 class="">2 seconds ago</small>
        <button type="button" class="btn-close ml-2.5 p-2 dark:invert"></button>
    </div>
<div class="p-3 break-words">
    Heads up, toasts will stack automatically
</div>
</div>

<div class="toast sm:w-[350px] border border-border rounded-lg shadow-toast overflow-hidden show mb-4">
    <div class="flex items-center py-2 px-3 border-b border-border dark:bg-d-bg">
        <?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 class="">5 minutes ago</small>
        <button type="button" class="btn-close ml-2.5 p-2 dark:invert"></button>
    </div>
    <div class="p-3 break-words">
        See? Just like this.
    </div>
</div>

<div class="toast sm:w-[350px] border border-border rounded-lg shadow-toast overflow-hidden show mb-4">
    <div class="flex items-center py-2 px-3 border-b border-border dark:bg-d-bg">
        <?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 class="">8 seconds ago</small>
        <button type="button" class="btn-close ml-2.5 p-2 dark:invert"></button>
    </div>
    <div class="p-3 break-words">
        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-[350px] border border-border rounded-lg shadow-toast overflow-hidden show items-center mb-4">
    <div class="flex">
        <div class="p-3 break-words">
            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-[350px] rounded-lg show items-center text-white bg-primary mb-4">
    <div class="flex">
        <div class="p-3 break-words">
            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-[350px] rounded-lg show items-center text-white bg-secondary dark:bg-d-bg mb-4">
    <div class="flex">
        <div class="p-3 break-words">
            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-[350px] rounded-lg show items-center text-white bg-success mb-4">
    <div class="flex">
        <div class="p-3 break-words">
            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-[350px] rounded-lg show items-center text-white bg-danger mb-4">
    <div class="flex">
        <div class="p-3 break-words">
            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-[350px] rounded-lg show items-center text-white bg-info mb-4">
    <div class="flex">
        <div class="p-3 break-words">
            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-[350px] rounded-lg show items-center text-white bg-warning mb-4">
    <div class="flex">
        <div class="p-3 break-words">
            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-[350px] border border-border rounded-lg shadow-toast overflow-hidden show mb-4">
    <div class="flex items-center py-2 px-3 border-b border-border">
        <?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(--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 class="">just now</small>
        <button type="button" class="btn-close ml-2.5 p-2 dark:invert"></button>
    </div>
    <div class="p-3 break-words">
        Hello, world! This is a toast message.
        <div class="mt-2 pt-2 border-top">
        <button type="button" class="btn hover:bg-primaryhover hover:shadow-btnprimary text-white bg-primary btn-sm">Take action</button>
        <button type="button" class="btn hover:bg-secondaryhover hover:shadow-btnsecondary text-white bg-secondary btn-sm">Close</button>
        </div>
    </div>
</div>

<div class="toast sm:w-[350px] border border-border rounded-lg shadow-toast overflow-hidden show mb-4">
    <div class="flex items-center py-2 px-3 border-b border-border">
        <?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 class="">2 seconds ago</small>
        <button type="button" class="btn-close ml-2.5 p-2 dark:invert"></button>
    </div>
    <div class="p-3 break-words">
        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 text-white bg-success btn-sm">Take action</button>
        <button type="button" class="btn hover:bg-secondaryhover hover:shadow-btnsecondary text-white bg-secondary btn-sm">Close</button>
        </div>
    </div>
</div>

<div class="toast sm:w-[350px] border border-border rounded-lg shadow-toast overflow-hidden show mb-4">
    <div class="flex items-center py-2 px-3 border-b border-border">
        <?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 class="">5 minutes ago</small>
        <button type="button" class="btn-close ml-2.5 p-2 dark:invert"></button>
    </div>
    <div class="p-3 break-words">
        Hello, world! This is a toast message.
        <div class="mt-2 pt-2 border-top">
        <button type="button" class="btn hover:bg-dangerhover hover:shadow-btndanger text-white bg-danger btn-sm">Take action</button>
        <button type="button" class="btn hover:bg-secondaryhover hover:shadow-btnsecondary text-white bg-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-[350px] border border-border rounded-lg shadow-toast overflow-hidden mb-6 show">
    <div class="flex items-center py-2 px-3 border-b border-border 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 break-words">
        Hello, world! This is a toast message.
    </div>
</div>
<div class="toast sm:w-[350px] border border-border rounded-lg shadow-toast overflow-hidden mb-6 show">
    <div class="flex items-center py-2 px-3 border-b border-border bg-secondary dark:bg-d-bg 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 break-words">
        Hello, world! This is a toast message.
    </div>
</div>
<div class="toast sm:w-[350px] border border-border rounded-lg shadow-toast overflow-hidden mb-6 show">
    <div class="flex items-center py-2 px-3 border-b border-border 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 break-words">
        Hello, world! This is a toast message.
    </div>
</div>
<div class="toast sm:w-[350px] border border-border rounded-lg shadow-toast overflow-hidden show">
    <div class="flex items-center py-2 px-3 border-b border-border 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 break-words">
        Hello, world! This is a toast message.
    </div>
</div>

Copyright © Developed by DexignZone 2024