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

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

Notification Badge

Author:
Mr Robot

3 years ago

10.6k
Icon Notification Badge with Count

Author:
Arya

3 years ago

14.4k
Cookie consent
Sticky Bottom Cookie Consent Notification

Author:
Sophia Baker

2 years ago

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

3 months ago

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

Author:
Diavox Jerome Soriano

11 months ago

971
Notification
Dev Community Notification Clone

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

1 year ago

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

1k
Notification Alert Section
Notification card with close button

Author:
Prashant

3 years ago

13.4k
Mfuranziza Hamza
Mfuranziza Hamza full development

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

729
Promotional notification
sticky bottom promotional banner

Author:
Laurits

3 years ago

10.1k
Tailwind CSS Alert

Author:
Krishna Gudpalle

3 years ago

11.3k
Snackbar with button
Show and close snackbar on button click with default timeout

Author:
Amit Pachange

2 years ago

10.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components