<div className="rounded-md border border-accent/20">
  <div className="rounded-t-md bg-accent/20 px-6">
    <img
      height="500"
      width="500"
      src="/product.png"
      alt=""
      className="h-80 w-full drop-shadow-lg"
    />
  </div>
  <div className="p-4">
    <div className="space-y-1">
      <p className="text-xl font-bold">$99</p>
      <p className="block text-lg font-medium">Nike Air Max Men&apos;s Shoes</p>
    </div>
    <div className="mt-4 flex items-center justify-between">
      <div className="flex items-center gap-2 divide-x divide-accent/50">
        <div
          className="flex items-center space-x-0.5 rounded-full bg-yellow-400 px-4 py-1 text-black"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="currentColor"
          >
            <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 className="block">4.3</span>
        </div>
        <div>
          <span className="block px-2 opacity-50">Sold 23</span>
        </div>
      </div>
      <button
        className="rounded-xl bg-primary px-2 py-1 text-primary-foreground underline"
      >
        <span className="sr-only block">Add to bag</span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <path
            d="M12.5 21h-3.926a3 3 0 0 1 -2.965 -2.544l-1.255 -8.152a2 2 0 0 1 1.977 -2.304h11.339a2 2 0 0 1 1.977 2.304l-.263 1.708"
          />
          <path d="M16 19h6" />
          <path d="M19 16v6" />
          <path d="M9 11v-5a3 3 0 0 1 6 0v5" />
        </svg>
      </button>
    </div>
  </div>
</div>
#Basic Info and Button with Link Style

#Card with Link to Details Discount and Stock with CTA

#Flex Card with Short Description

#Minimal Link Card with Pricing

#Rating and Add to Bag
