Notification - Htmlwind

Simple notification

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

Notification

Author Htmlwind

Tailwind v3.4 1.1k 5

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

Notifications
Notifications

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

2 years ago

4.2k
Cookie consent
Sticky Bottom Cookie Consent Notification

Sophia Baker

3 years ago

11.1k
Notification Badge

Mr Robot

4 years ago

10.9k
Mfuranziza Hamza
Mfuranziza Hamza full development

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
Notification alert section
Show info, success, or error messages

Arya

4 years ago

11.5k
Tailwind CSS Alert

Krishna Gudpalle

3 years ago

11.8k
Subcribe Card - Alert - Notification

ABDO-SY

1 year ago

1.2k
Engineering Project Dashboard
Track engineering assignments, project progress, technology stack, and delivery timelines in one simple dashboard.

Ayyamperumal S

6 months ago

460
Toast
The best Notfication Toast with Tailwind css

irahoza daniel

1 year ago

1.6k
Game Live Score
A live score game layout design perfect for your live scoring application

Diavox Jerome Soriano

1 year ago

1.5k
Cookie consent banner

Leif99

3 years ago

18.1k
Centre de Notifications
Centre de Notifications

Omer fils ELENGA

6 months ago

650