Animated Notification

This tailwind example is contributed by $@(\/)(\/)¥, on 15-Jan-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Toast, Snackbar

Notification

$$@(\/)(\/)¥ profile image$

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

Tailwind v3.4 2k 2

Fork Fullscreen

<div
    class="animate-slideUp absolute bottom-10 left-4 sm:left-10 w-fit p-4 sm:pl-2 sm:pr-4 sm:py-2 flex flex-col sm:flex-row gap-4 items-center bg-gray-200 dark:bg-[#252525] rounded border border-gray-400 dark:border-[#414141]">
    
    <div class="rounded border border-gray-400 dark:border-[#414141]">
      <img class="sm:w-[6rem] sm:h-[6rem] rounded object-center object-cover p-1" src="https://images.unsplash.com/photo-1664570000007-db164768644d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxM3x8Y3NzfGVufDB8MHx8fDE3MzcwMDU4OTF8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Notification Image" />
    </div>
    <div class="flex flex-col gap-1">
      <span class="text-sm md:text-base dark:text-gray-300">Someone Purchased a</span>
      <h3 class="text-lg md:text-2xl dark:text-white font-bold">Slide Up Notification</h3>
      <span class="text-sm md:text-base text-[#e48413] font-semibold">15 minutes ago from @Sammytg7</span>
    </div>
    
    <button class="absolute -top-3 -right-3 bg-[#AD1A19] px-3 py-1 rounded-full font-bold text-white">X</button>
  </div>

<div
    class="animate-slideDown absolute top-10 right-4 sm:right-10 w-fit p-4 sm:pl-2 sm:pr-4 sm:py-2 flex flex-col sm:flex-row gap-4 items-center bg-gray-200 dark:bg-[#252525] rounded border border-gray-400 dark:border-[#414141]">
    
    <div class="rounded border border-gray-400 dark:border-[#414141]">
      <img class="sm:w-[6rem] sm:h-[6rem] rounded object-center object-cover p-1" src="https://images.unsplash.com/photo-1664570000007-db164768644d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxM3x8Y3NzfGVufDB8MHx8fDE3MzcwMDU4OTF8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Notification Image" />
    </div>
    <div class="flex flex-col gap-1">
      <span class="text-sm md:text-base dark:text-gray-300">Someone Purchased a</span>
      <h3 class="text-lg md:text-2xl dark:text-white font-bold">Slide Down Notification</h3>
      <span class="text-sm md:text-base text-[#e48413] font-semibold">15 minutes ago from @Sammytg7</span>
    </div>
    
    <button class="absolute -top-3 -right-3 bg-[#AD1A19] px-3 py-1 rounded-full font-bold text-white">X</button>
  </div>

<div
    class="animate-slideRight absolute bottom-1/3 right-4 sm:right-10 w-fit p-4 sm:pl-2 sm:pr-4 sm:py-2 flex flex-col sm:flex-row gap-4 items-center bg-gray-200 dark:bg-[#252525] rounded border border-gray-400 dark:border-[#414141]">
    
    <div class="rounded border border-gray-400 dark:border-[#414141]">
      <img class="sm:w-[6rem] sm:h-[6rem] rounded object-center object-cover p-1" src="https://images.unsplash.com/photo-1664570000007-db164768644d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxM3x8Y3NzfGVufDB8MHx8fDE3MzcwMDU4OTF8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Notification Image" />
    </div>
    <div class="flex flex-col gap-1">
      <span class="text-sm md:text-base dark:text-gray-300">Someone Purchased a</span>
      <h3 class="text-lg md:text-2xl dark:text-white font-bold">Slide Right Notification</h3>
      <span class="text-sm md:text-base text-[#e48413] font-semibold">15 minutes ago from @Sammytg7</span>
    </div>
    
    <button class="absolute -top-3 -right-3 bg-[#AD1A19] px-3 py-1 rounded-full font-bold text-white">X</button>
  </div>

<div
    class="animate-slideLeft absolute top-1/3 left-4 sm:left-10 w-fit p-4 sm:pl-2 sm:pr-4 sm:py-2 flex flex-col sm:flex-row gap-4 items-center bg-gray-200 dark:bg-[#252525] rounded border border-gray-400 dark:border-[#414141]">
    
    <div class="rounded border border-gray-400 dark:border-[#414141]">
      <img class="sm:w-[6rem] sm:h-[6rem] rounded object-center object-cover p-1" src="https://images.unsplash.com/photo-1664570000007-db164768644d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxM3x8Y3NzfGVufDB8MHx8fDE3MzcwMDU4OTF8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Notification Image" />
    </div>
    <div class="flex flex-col gap-1">
      <span class="text-sm md:text-base dark:text-gray-300">Someone Purchased a</span>
      <h3 class="text-lg md:text-2xl dark:text-white font-bold">Slide Left Notification</h3>
      <span class="text-sm md:text-base text-[#e48413] font-semibold">15 minutes ago from @Sammytg7</span>
    </div>
    
    <button class="absolute -top-3 -right-3 bg-[#AD1A19] px-3 py-1 rounded-full font-bold text-white">X</button>
  </div>
</div>

Related Examples

Centre de Notifications
Centre de Notifications

Omer fils ELENGA

7 months ago

734
Notification - Htmlwind
Simple notification

Htmlwind

1 year ago

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

Bushobozi Bush Ivan

8 months ago

637
Toast
The best Notfication Toast with Tailwind css

irahoza daniel

1 year ago

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

Rajesh Pandey

1 year ago

1.6k
Notification
Dev Community Notification Clone

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

1 year ago

3.8k
Tailwind CSS Alert

Krishna Gudpalle

4 years ago

11.8k
Floating dismissible notification
bottom right floating alert

Prashant

4 years ago

14.4k
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

3 months ago

332
Status bar

Maxim

1 year ago

1.5k
Product hunt showcase

Lukas Müller

3 years ago

13k
Cookie consent
Sticky Bottom Cookie Consent Notification

Sophia Baker

3 years ago

11.1k