Home
$@(\/)(\/)¥
Animated Notification

Animated Notification

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

Notification

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

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

1.4k

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

Promotional notification
sticky bottom promotional banner

Author:
Laurits

2 years ago

10k
Notification badges with count

Author:
Arya

2 years ago

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

Author:
Rajesh Maheshwari

8 months ago

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

Author:
Rajesh Pandey

5 months ago

621
Subcribe Card - Alert - Notification

Author:
ABDO-SY

8 months ago

672
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

10 months ago

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

Author:
Diavox Jerome Soriano

9 months ago

778
Notification
Dev Community Notification Clone

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

11 months ago

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

5 months ago

483
Snackbar with button
Show and close snackbar on button click with default timeout

Author:
Amit Pachange

2 years ago

10.6k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

3 weeks ago

393
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 month ago

199

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components