<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  $(document).ready(function() {
    $(".ajax_add_to_cart").on("click", function() {
      var productImage = $(this).closest(".post").find("img");
      productImage
        .clone()
        .css({
          position: "absolute",
          "z-index": "11100",
          top: productImage.offset().top,
          left: productImage.offset().left
        })
        .appendTo("body")
        .animate({
            opacity: 0.05,
            left: $("#cart-punkt").offset().left,
            top: $("#cart-punkt").offset().top,
            width: 20
          },
          1000,
          function() {
            $(this).remove();
          }
        );
    });
  });
</script>

<header class="h-20 border-b flex items-center justify-between px-4">
  <h1>
    Пример анимации добавления товара в корзину
  </h1>
  <div id="cart-punkt" class="p-3 rounded-lg bg-blue-100 text-blue-500">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
      <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
    </svg>
  </div>
</header>
<main class="max-w-5xl w-full mx-auto">
  <div class="mt-16 grid grid-cols-4 gap-4">
    <div class="post flex flex-col items-center gap-4 border p-4 rounded-lg hover:-translate-y-2 duration-200">
      <img src="https://em-content.zobj.net/thumbs/120/apple/354/hamburger_1f354.png" alt="Товар 1">
      <button class="ajax_add_to_cart w-full py-3 rounded-lg bg-blue-100 text-blue-500 text-sm active:scale-95 duration-100" data-product_id="1">В корзину</button>
    </div>

    <div class="post flex flex-col items-center gap-4 border p-4 rounded-lg hover:-translate-y-2 duration-200">
      <img src="https://em-content.zobj.net/thumbs/120/apple/354/hamburger_1f354.png" alt="Товар 2">
      <button class="ajax_add_to_cart w-full py-3 rounded-lg bg-blue-100 text-blue-500 text-sm active:scale-95 duration-100" data-product_id="2">В корзину</button>
    </div>

    <div class="post flex flex-col items-center gap-4 border p-4 rounded-lg hover:-translate-y-2 duration-200">
      <img src="https://em-content.zobj.net/thumbs/120/apple/354/hamburger_1f354.png" alt="Товар 3">
      <button class="ajax_add_to_cart w-full py-3 rounded-lg bg-blue-100 text-blue-500 text-sm active:scale-95 duration-100" data-product_id="3">В корзину</button>
    </div>

    <div class="post flex flex-col items-center gap-4 border p-4 rounded-lg hover:-translate-y-2 duration-200">
      <img src="https://em-content.zobj.net/thumbs/120/apple/354/hamburger_1f354.png" alt="Товар 4">
      <button class="ajax_add_to_cart w-full py-3 rounded-lg bg-blue-100 text-blue-500 text-sm active:scale-95 duration-100" data-product_id="4">В корзину</button>
    </div>
  </div>
</main>