Snackbar with button

Show and close snackbar on button click with default timeout

This tailwind example is contributed by Amit Pachange, on 31-Oct-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Toast, Snackbar

Notification

Author Amit Pachange

Tailwind v3.4 11.2k 13

Fork Fullscreen

<button onclick="showSnackbar()" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Show Snackbar</button>

<div id="snackbar" class="bg-gray-900 text-white p-4 rounded-md fixed bottom-4 right-4 flex justify-between items-center" style="display: none;">
    Snackbar message!
    <button class="text-white" onclick="closeSnackbar()">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
        </svg>
    </button>
</div>

function closeSnackbar() {
    var snackbar = document.getElementById("snackbar");
    snackbar.style.display = "none";
}
</script>

Related Examples

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

Code huit

3 years ago

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

Prajwal Hallale

3 years ago

8.1k
Tailwind CSS Alert

Krishna Gudpalle

3 years ago

11.8k
Floating dismissible notification
bottom right floating alert

Prashant

4 years ago

14.4k
Notification Badge

Mr Robot

4 years ago

10.9k
Cookie consent
Sticky Bottom Cookie Consent Notification

Sophia Baker

3 years ago

11.1k
Succes Warning Error Toast Designs.
Succes Warning Error Toast Designs.

Sedat Kumcu

1 year ago

2.6k
Product hunt showcase

Lukas Müller

3 years ago

13k
Status bar

Maxim

1 year ago

1.5k
Toast
The best Notfication Toast with Tailwind css

irahoza daniel

1 year ago

1.6k
Mfuranziza Hamza
Mfuranziza Hamza full development

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.5k
Notifications
Notifications

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

2 years ago

4.2k