Home
Anonymous
Toast Notification

Toast Notification

This tailwind example is contributed by Anonymous, on 25-Jan-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Toast, Snackbar

Notification

Author Anonymous

821

Fork Fullscreen

<div class="flex w-full max-w-sm flex-col items-center space-y-4 sm:items-start">
    <div
        class="pointer-events-auto w-full max-w-sm rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 transition-transform duration-300 ease-out z-50">
        <div class="p-4">
            <div class="flex items-start">
                <div class="w-0 flex-1">
                    <p class="text-sm font-medium text-gray-900" style="margin-bottom: 0rem;">Our API is now available
                        🎉🎉🎉</p>
                    <p class="mt-2 text-sm text-gray-500">Time to automate your Work</p>
                    <div class="mt-4 flex">
                        <button type="button" class="inline-flex items-center rounded-md bg-gray-800 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-800">Check it out</button><button type="button" class="ml-3 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">Ignore</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

Animated Notification

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

1.7k
Game Live Score
A live score game layout design perfect for your live scoring application

Author:
Diavox Jerome Soriano

1 year ago

1k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

1 year ago

1.2k
Status bar

Author:
Maxim

1 year ago

992
Notification
Dev Community Notification Clone

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

3k
Subcribe Card - Alert - Notification

Author:
ABDO-SY

11 months ago

934
Succes Warning Error Toast Designs.
Succes Warning Error Toast Designs.

Author:
Sedat Kumcu

1 year ago

2.1k
Snackbar with button
Show and close snackbar on button click with default timeout

Author:
Amit Pachange

2 years ago

10.8k
Promotional notification
sticky bottom promotional banner

Author:
Laurits

3 years ago

10.2k
joker
joker cyber punk

Author:
Baraka Salvator

7 months ago

1.2k
Toast Notifications
Visually appealing toast notification component designed with Tailwind CSS

Author:
Rajesh Maheshwari

11 months ago

1.2k
Notification alert section
Show info, success, or error messages

Author:
Arya

3 years ago

10.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components