Home
Amit Pachange
Snackbar with button

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 CSS v3. It is responsive. similar terms for this example are Toast, Snackbar

Notification

Author Amit Pachange

10.2k

11

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>

<script>
function showSnackbar() {
    var snackbar = document.getElementById("snackbar");
    snackbar.style.display = "block";
    setTimeout(function() {
        snackbar.style.display = "none";
    }, 3000); // Close the Snackbar after 3 seconds (adjust as needed)
}

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.

Author:
Code huit

2 years ago

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

Author:
Prajwal Hallale

2 years ago

7.9k
Tailwind CSS Alert

Author:
Krishna Gudpalle

2 years ago

10.8k
Floating dismissible notification
bottom right floating alert

Author:
Prashant

3 years ago

13.2k
Notification Badge

Author:
Mr Robot

3 years ago

10.1k
Cookie consent
Sticky Bottom Cookie Consent Notification

Author:
Sophia Baker

2 years ago

10.4k
Toast
Fully Responsive Toast

Author:
AKASH GANDHAR

1 year ago

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

3 months ago

485
Notification badges with count

Author:
Arya

2 years ago

14.5k
Cookie consent dialog box

Author:
Leif99

2 years ago

14k
Animated Notification

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

7 months ago

997
Dismissible alert bar

Author:
Simon Scheffer

2 years ago

9.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1