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

811

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

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

Author:
Amit Pachange

2 years ago

10.7k
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

4 months ago

605
Toast
mensajes de alerta a los visitantes de su sitio web.

Author:
Code huit

2 years ago

15.9k
Succes Warning Error Toast Designs.
Succes Warning Error Toast Designs.

Author:
Sedat Kumcu

1 year ago

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

Author:
Diavox Jerome Soriano

11 months ago

973
Notification badges with count

Author:
Arya

3 years ago

15.3k
Icon Notification Badge with Count

Author:
Arya

3 years ago

14.4k
Responsive eCommerce Sidebar Layout with Hamburger Menu | Tailwind CSS UI for Online Stores
Build a clean and responsive eCommerce sidebar layout with a smooth hamburger menu using Tailwind CSS and Alpine.js. Ideal for devotional, spiritual, or modern online stores. Includes dark mode support, navigation links, cart, login, and a dynamic layout for beautiful product pages.

Author:
Rajesh Pandey

8 months ago

966
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

8 months ago

597
Floating dismissible notification
bottom right floating alert

Author:
Prashant

3 years ago

13.5k
Mfuranziza Hamza
Mfuranziza Hamza full development

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

730
Notification Alert Section
Notification card with close button

Author:
Prashant

3 years ago

13.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components