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

Promotional notification
sticky bottom promotional banner

Laurits

3 years ago

10.9k
Icon Notification Badge with Count

Anonymous

4 months ago

232
Dismissible alert bar

Simon Scheffer

3 years ago

10.5k
Notification Alert Section
Notification card with close button

Prashant

4 years ago

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

NUNNA VIJAYA KRISHNA

8 months ago

1.1k
Cookie consent banner

Leif99

3 years ago

18.2k
Succes Warning Error Toast Designs.
Succes Warning Error Toast Designs.

Sedat Kumcu

1 year ago

2.6k
Notification
Dev Community Notification Clone

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

3.8k
Toast
Fully Responsive Toast

AKASH GANDHAR

2 years ago

2.9k
Product hunt showcase

Lukas Müller

3 years ago

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

Bushobozi Bush Ivan

8 months ago

633
joker
joker cyber punk

Baraka Salvator

1 year ago

2.1k