<section className="inline-flex w-full place-content-center items-center">
  <div
    className="grid w-fit place-items-center gap-4 py-20 md:grid-cols-2 lg:grid-cols-3"
  >
    <div className="group relative h-[500px] w-[240px]">
      <div
        className="pointer-events-none absolute left-0 right-0 top-0 z-50 flex justify-between p-2"
      >
        <div></div>
        <div className="pointer-events-auto box-border">
          <button
            className="pointev relative inline-flex transition-all ease-in-out active:scale-95"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              view-box="0 0 24 24"
              className="h-6 w-6 fill-background/40 stroke-foreground"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path
                d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z"
              />
            </svg>
          </button>
        </div>
      </div>
      <a href="/cards" className="absolute top-0 h-full w-60">
        <div className="relative h-96 overflow-hidden rounded-xl">
          <div
            className="absolute inset-0 -z-10 bg-[url('https://images.unsplash.com/photo-1535311631117-da5b8ab9c505?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fGx1eHVyeSUyMHZhY2F0aW9ufGVufDB8fDB8fHww')] bg-cover bg-center"
          ></div>
          <div className="absolute inset-0 hidden bg-background group-hover:block">
            <img
              className="group-hover:animate-bnb-first absolute inset-0 h-full w-full object-cover opacity-0"
              src="https://images.unsplash.com/photo-1512100356356-de1b84283e18?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bHV4dXJ5JTIwdmFjYXRpb258ZW58MHx8MHx8fDA%3D"
              alt=""
            />

            <img
              className="group-hover:animate-bnb-second absolute inset-0 h-full w-full object-cover opacity-0"
              src="https://images.unsplash.com/photo-1559601531-503da8fa81f7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGx1eHVyeSUyMHZhY2F0aW9ufGVufDB8fDB8fHww"
              alt=""
            />

            <img
              className="group-hover:animate-bnb-third absolute inset-0 h-full w-full object-cover opacity-0"
              src="https://images.unsplash.com/photo-1500815845799-7748ca339f27?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8bHV4dXJ5JTIwdmFjYXRpb258ZW58MHx8MHx8fDA%3D"
              alt=""
            />
          </div>
        </div>
        <div className="space-y-1 py-2">
          <div className="flex h-6 items-center space-x-1 py-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              className="h-44 w-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path
                d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
              />
            </svg>
            <span>4.9 (5000)</span>
          </div>
          <p className="font-bold">
            Lorem ipsum dolor sit amet consectetur adipisicing elit
          </p>
          <p className="text-sm font-light">50$ Odio consequatur vitae</p>
        </div>
      </a>
    </div>

    <div className="group relative h-[500px] w-[240px]">
      <div
        className="pointer-events-none absolute left-0 right-0 top-0 z-50 flex justify-between p-2"
      >
        <div></div>
        <div className="pointer-events-auto box-border">
          <button
            className="pointev relative inline-flex transition-all ease-in-out active:scale-95"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              view-box="0 0 24 24"
              className="h-6 w-6 fill-background/40 stroke-foreground"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path
                d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z"
              />
            </svg>
          </button>
        </div>
      </div>
      <a href="/cards" className="absolute top-0 h-full w-60">
        <div className="relative h-96 overflow-hidden rounded-xl">
          <div
            className="absolute inset-0 -z-10 bg-[url('https://images.unsplash.com/photo-1613425653628-23fd58c3c2b1?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHZhY2F0aW9ufGVufDB8fDB8fHww')] bg-cover bg-center"
          ></div>
          <div className="absolute inset-0 hidden bg-background group-hover:block">
            <img
              className="group-hover:animate-bnb-first absolute inset-0 h-full w-full object-cover opacity-0"
              src="https://images.unsplash.com/photo-1596120236172-231999844ade?w=1000&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dmFjYXRpb258ZW58MHx8MHx8fDA%3D"
              alt=""
            />

            <img
              className="group-hover:animate-bnb-second absolute inset-0 h-full w-full object-cover opacity-0"
              src=" https://images.unsplash.com/photo-1550399504-8953e1a6ac87?w=1000&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8dmFjYXRpb258ZW58MHx8MHx8fDA%3D"
              alt=""
            />

            <img
              className="group-hover:animate-bnb-third absolute inset-0 h-full w-full object-cover opacity-0"
              src="https://images.unsplash.com/photo-1602002418816-5c0aeef426aa?w=1000&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8dmFjYXRpb258ZW58MHx8MHx8fDA%3D"
              alt=""
            />
          </div>
        </div>
        <div className="space-y-1 py-2">
          <div className="flex h-6 items-center space-x-1 py-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              className="h-44 w-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path
                d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
              />
            </svg>
            <span>4.9 (5000)</span>
          </div>
          <p className="font-bold">
            Lorem ipsum dolor sit amet consectetur adipisicing elit
          </p>
          <p className="text-sm font-light">50$ Odio consequatur vitae</p>
        </div>
      </a>
    </div>

    <div className="group relative h-[500px] w-[240px]">
      <div
        className="pointer-events-none absolute left-0 right-0 top-0 z-50 flex justify-between p-2"
      >
        <div></div>
        <div className="pointer-events-auto box-border">
          <button
            className="pointev relative inline-flex transition-all ease-in-out active:scale-95"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              view-box="0 0 24 24"
              className="h-6 w-6 fill-background/40 stroke-foreground"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path
                d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z"
              />
            </svg>
          </button>
        </div>
      </div>
      <a href="/cards" className="absolute top-0 h-full w-60">
        <div className="relative h-96 overflow-hidden rounded-xl">
          <div
            className="absolute inset-0 -z-10 bg-[url('https://images.unsplash.com/photo-1588979355313-6711a095465f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8ZmFtaWx5JTIwdmFjYXRpb258ZW58MHx8MHx8fDA%3D')] bg-cover bg-center"
          ></div>
          <div className="absolute inset-0 hidden bg-background group-hover:block">
            <img
              className="group-hover:animate-bnb-first absolute inset-0 h-full w-full object-cover opacity-0"
              src="https://images.unsplash.com/photo-1615920292619-d7ff7ce76d50?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8ZmFtaWx5JTIwdmFjYXRpb258ZW58MHx8MHx8fDA%3D"
              alt=""
            />

            <img
              className="group-hover:animate-bnb-second absolute inset-0 h-full w-full object-cover opacity-0"
              src="https://images.unsplash.com/photo-1518658761661-a3c568ee7b64?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fGZhbWlseSUyMHZhY2F0aW9ufGVufDB8fDB8fHww"
              alt=""
            />

            <img
              className="group-hover:animate-bnb-third absolute inset-0 h-full w-full object-cover opacity-0"
              src="https://images.unsplash.com/photo-1506836467174-27f1042aa48c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fGZhbWlseSUyMHZhY2F0aW9ufGVufDB8fDB8fHww"
              alt=""
            />
          </div>
        </div>
        <div className="space-y-1 py-2">
          <div className="flex h-6 items-center space-x-1 py-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              className="h-44 w-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path
                d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
              />
            </svg>
            <span>4.9 (5000)</span>
          </div>
          <p className="font-bold">
            Lorem ipsum dolor sit amet consectetur adipisicing elit
          </p>
          <p className="text-sm font-light">50$ Odio consequatur vitae</p>
        </div>
      </a>
    </div>
  </div>
</section>
#Grayscale cards with hover effect

#Colorful cards with hover effect

#Grid with hover effect

#Grid with hover effect

#Simple Card
