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

Abhiraj

1 year ago

2k
Icon Notification Badge with Count

Anonymous

3 months ago

229
Centre de Notifications
Centre de Notifications

Omer fils ELENGA

6 months ago

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

Indra

1 year ago

1.1k
Cookie consent dialog box

Leif99

3 years ago

14.9k
Dismissible alert bar

Simon Scheffer

3 years ago

10.5k
eCommerce Customer Profile Dashboard with Wishlist & Orders
A modern customer profile dashboard built with HTML, Tailwind CSS, and vanilla JavaScript. It includes an editable profile section, order history, wishlist management, product reviews, tabbed navigation, responsive sidebar, toast notifications, and clean eCommerce-inspired UI. Perfect for online stores, marketplaces, customer portals, account management systems, and shopping applications.

JUGENDRA GANGWAR

2 months ago

283
Succes Warning Error Toast Designs.
Succes Warning Error Toast Designs.

Sedat Kumcu

1 year ago

2.6k
Notification Badge

Mr Robot

4 years ago

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

Diavox Jerome Soriano

1 year ago

1.5k
Promotional notification
sticky bottom promotional banner

Laurits

3 years ago

10.8k
Toast Notification

Anonymous

1 year ago

1.5k