Home
Htmlwind
Notification - Htmlwind

Notification - Htmlwind

Simple notification

This tailwind example is contributed by Htmlwind, on 02-Jun-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Toast, Snackbar

Notification

Author Htmlwind

393

Fork Fullscreen

<!-- document.addEventListener("click", (event) => {
  const button = event.target.closest("button");
  if (button?.classList.contains("close")) {
    closeBtnHandler(button);
  }
});

const closeBtnHandler = (button) => {
  try {
    // Find the closest notification element
    const notification = button.closest(".notification");
    if (!notification) return;

// Add fade-out effect
    notification.classList.add("opacity-0");

// Remove the notification after the transition
    const transitionDuration = parseFloat(getComputedStyle(notification).transitionDuration) * 1000 || 150;
    setTimeout(() => {
      notification.remove();
    }, transitionDuration);
  } catch (error) {
    console.error("Error closing notification:", error);
  }
}; -->

<div class="min-h-screen bg-gray-50">
  <div aria-live="assertive" class="pointer-events-none fixed inset-x-4 bottom-6 flex flex-col items-center space-y-4 sm:inset-x-6 sm:bottom-auto sm:top-6 sm:items-end">
    <div class="notification pointer-events-auto flex w-full max-w-sm items-start gap-x-3 rounded-xl bg-white p-4 shadow-lg ring-1 ring-inset ring-gray-200 transition-opacity">
      <div class="flex-1">
        <p class="text-sm font-semibold text-gray-900">
          Succesfully posted!
        </p>
        <p class="mt-1 text-sm text-gray-500">
          Post will be live in a few minutes.
        </p>
      </div>
      <div class="shrink-0">
        <button type="button" class="close relative rounded-md text-gray-400 hover:text-gray-500 focus:outline-2 focus:outline-offset-2 focus:outline-pink-500">
          <span class="sr-only">Close</span>
          <svg aria-hidden="true" class="size-5" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.573 41.6601C14.809 42.4242 14.809 43.6628 15.573 44.4269C16.3371 45.191 17.5759 45.191 18.34 44.4269L15.573 41.6601ZM31.3834 31.3834C32.1475 30.6193 32.1475 29.3807 31.3834 28.6166C30.6193 27.8525 29.3807 27.8525 28.6166 28.6166L31.3834 31.3834ZM28.6166 28.6166C27.8525 29.3807 27.8525 30.6193 28.6166 31.3834C29.3807 32.1475 30.6193 32.1475 31.3834 31.3834L28.6166 28.6166ZM44.4269 18.34C45.191 17.5759 45.191 16.3371 44.4269 15.573C43.6628 14.809 42.4242 14.809 41.6601 15.573L44.4269 18.34ZM31.3834 28.6166C30.6193 27.8525 29.3807 27.8525 28.6166 28.6166C27.8525 29.3807 27.8525 30.6193 28.6166 31.3834L31.3834 28.6166ZM41.6601 44.4269C42.4242 45.191 43.6628 45.191 44.4269 44.4269C45.191 43.6628 45.191 42.4242 44.4269 41.6601L41.6601 44.4269ZM28.6166 31.3834C29.3807 32.1475 30.6193 32.1475 31.3834 31.3834C32.1475 30.6193 32.1475 29.3807 31.3834 28.6166L28.6166 31.3834ZM18.34 15.573C17.5759 14.809 16.3371 14.809 15.573 15.573C14.809 16.3371 14.809 17.5759 15.573 18.34L18.34 15.573ZM18.34 44.4269L31.3834 31.3834L28.6166 28.6166L15.573 41.6601L18.34 44.4269ZM31.3834 31.3834L44.4269 18.34L41.6601 15.573L28.6166 28.6166L31.3834 31.3834ZM28.6166 31.3834L41.6601 44.4269L44.4269 41.6601L31.3834 28.6166L28.6166 31.3834ZM31.3834 28.6166L18.34 15.573L15.573 18.34L28.6166 31.3834L31.3834 28.6166Z" fill="currentColor"></path>
          </svg>
          <span class="absolute -inset-0.5 rounded-md"></span>
        </button>
      </div>
    </div>
  </div>
</div>

Related Examples

Notification Alert Section
Notification card with close button

Author:
Prashant

3 years ago

12.8k
Notification Badge

Author:
Mr Robot

3 years ago

10.3k
Notifications
Notifications

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

1 year ago

3.6k
Tailwind CSS Alert

Author:
Krishna Gudpalle

3 years ago

11.1k
Animated Notification

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

9 months ago

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

Author:
Code huit

2 years ago

15.5k
Cookie consent
Sticky Bottom Cookie Consent Notification

Author:
Sophia Baker

2 years ago

10.7k
Status bar

Author:
Maxim

9 months ago

747
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

5 months ago

606
Mfuranziza Hamza
Mfuranziza Hamza full development

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

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

Author:
Amit Pachange

1 year ago

10.5k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

116

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components