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

216

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

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

Author:
Prajwal Hallale

2 years ago

7.9k
Toast Notifications
Visually appealing toast notification component designed with Tailwind CSS

Author:
Rajesh Maheshwari

6 months ago

786
Cookie consent dialog box

Author:
Leif99

2 years ago

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

Author:
Indra

3 weeks ago

118
Toast Notification

Author:
Anonymous

7 months ago

493
Status bar

Author:
Maxim

8 months ago

741
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.

Author:
Ijila Itunu

1 day ago

14
Subcribe Card - Alert - Notification

Author:
ABDO-SY

6 months ago

557
Notification alert section
Show info, success, or error messages

Author:
Arya

3 years ago

10.5k
Product hunt showcase

Author:
Lukas Müller

2 years ago

12.1k
Animated Notification

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

8 months ago

1.2k
Cookie consent banner

Author:
Leif99

2 years ago

16.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components