Toast Notification

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

Notification

Author Anonymous

Tailwind v3.4 1.6k 5

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

Floating dismissible notification
bottom right floating alert

Prashant

4 years ago

14.4k
NOTIFICATION
This code can serve as a boiler-plate for a notification for an application

NUNNA VIJAYA KRISHNA

9 months ago

1.2k
Notification - Htmlwind
Simple notification

Htmlwind

1 year ago

1.1k
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.

Indra

1 year ago

1.1k
Promotional notification
sticky bottom promotional banner

Laurits

3 years ago

10.9k
Notification Center with Filter Tabs
Notification center UI featuring unread indicators, activity filters, user avatars and interactive mark-as-read functionality.

JUGENDRA GANGWAR

1 week ago

19
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Bushobozi Bush Ivan

8 months ago

640
Cookie consent banner

Leif99

3 years ago

18.2k
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.

Rajesh Pandey

1 year ago

1.7k
Closable toast message
show notification toast message at the bottom right corner

Prajwal Hallale

3 years ago

8.1k
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.

Ijila Itunu

1 year ago

1.5k
Status bar

Maxim

1 year ago

1.5k