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

862

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

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

Author:
Code huit

2 years ago

16.2k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

1 year ago

1.4k
Notification Alert Section
Notification card with close button

Author:
Prashant

3 years ago

13.6k
Scooby’s Hello – A Tailwind CSS Cartoon Animation
A playful animation built with Tailwind CSS and minimal custom CSS, featuring a cartoon-style Scooby-inspired dog sliding in from the left, wagging its tail, and cheerfully saying "Hello!"—perfect for adding personality to a fun web project.

Author:
Bonimater

10 months ago

792
vscode a la omerlinks
vscode a la omerlinks

Author:
Omer fils ELENGA

4 months ago

308
Tailwind CSS Alert

Author:
Krishna Gudpalle

3 years ago

11.4k
Centre de Notifications
Centre de Notifications

Author:
Omer fils ELENGA

1 month ago

117
Mfuranziza Hamza
Mfuranziza Hamza full development

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

1.1k
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Author:
Bushobozi Bush Ivan

1 month ago

87
Notification Badge

Author:
Mr Robot

3 years ago

10.7k
Dismissible alert bar

Author:
Simon Scheffer

3 years ago

10.1k
Promotional notification
sticky bottom promotional banner

Author:
Laurits

3 years ago

10.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components