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

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

Cookie consent banner

Author:
Leif99

2 years ago

16.9k
Cookie consent
Sticky Bottom Cookie Consent Notification

Author:
Sophia Baker

2 years ago

10.7k
Dismissible alert bar

Author:
Simon Scheffer

2 years ago

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

Author:
Amit Pachange

2 years ago

10.7k
Cookie consent dialog box

Author:
Leif99

2 years ago

14.5k
Tailwind CSS Alert

Author:
Krishna Gudpalle

3 years ago

11.2k
Toast Notification

Author:
Anonymous

11 months ago

783
vscode a la omerlinks
vscode a la omerlinks

Author:
Omer fils ELENGA

3 weeks ago

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

Author:
Code huit

2 years ago

15.8k
Toast
The best Notfication Toast with Tailwind css

Author:
irahoza daniel

7 months ago

740
Notification badges with count

Author:
Arya

2 years ago

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

7 months ago

582

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components