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

Animated Notification

This tailwind example is contributed by $@(\/)(\/)Y, 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

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

Author $@(\/)(\/)Y

980

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