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

261

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

Toast
Fully Responsive Toast

Author:
AKASH GANDHAR

11 months ago

1.7k
Scooby’s Hello – A Tailwind CSS Cartoon Animation
A playful animation built with Tailwind CSS and minimal custom CSS, featuring a cartoon-style Scooby-inspired dog sliding in from the left, wagging its tail, and cheerfully saying "Hello!"—perfect for adding personality to a fun web project.

Author:
Bonimater

1 month ago

145
joker
joker cyber punk

Author:
Baraka Salvator

2 weeks ago

175
Floating dismissible notification
bottom right floating alert

Author:
Prashant

2 years ago

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

Author:
Arya

2 years ago

10.1k
Cookie consent banner

Author:
Leif99

2 years ago

16.2k
Animated Notification

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

5 months ago

802
Notifications
Notifications

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

1 year ago

3.1k
Status bar

Author:
Maxim

5 months ago

517
Notification Badge

Author:
Mr Robot

2 years ago

9.9k
Notification Alert Section
Notification card with close button

Author:
Prashant

2 years ago

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

Author:
Rajesh Maheshwari

4 months ago

553

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components