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

753

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

Mfuranziza Hamza
Mfuranziza Hamza full development

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

461
Notification
Dev Community Notification Clone

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

11 months ago

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

Author:
Arya

3 years ago

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

Author:
Rajesh Maheshwari

8 months ago

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

Author:
Amit Pachange

2 years ago

10.5k
Succes Warning Error Toast Designs.
Succes Warning Error Toast Designs.

Author:
Sedat Kumcu

11 months ago

1.9k
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Author:
Ijila Itunu

1 month ago

184
Toast
The best Notfication Toast with Tailwind css

Author:
irahoza daniel

5 months ago

676
Confirmation Modal for Critical Actions
A clean and responsive warning dialog component built with Tailwind CSS. Includes a title, descriptive text, and action buttons for confirmation or cancellation of critical actions.

Author:
Indra

2 months ago

207
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

173
Product hunt showcase

Author:
Lukas Müller

2 years ago

12.3k
Notification badges with count

Author:
Arya

2 years ago

15k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components