Copy<div class="max-w-80 p-4 border-2 border-black">
  <img
    alt="product image"
    src="https://images.unsplash.com/photo-1596998791568-386ef5297c2e?q=80&w=2960&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
  />
  <div class="mt-4 space-y-4">
    <h3 class="font-head text-3xl font-medium mb-1">Classic Gameboy</h3>
    <div class="flex justify-between items-center">
      <span class="text-lg font-semibold">$29.99</span>
      <button class="px-6 py-2 text-sm font-head bg-primary-400 border-2 border-black shadow-md hover:shadow-xs transition-all">
      Add To Cart
    </button>
    </div>
  </div>
</div>

Copy<div class="inline-block border-2 border-black p-4 shadow-md cursor-pointer transition-all hover:shadow-xs">
    <h4 class="font-head text-2xl font-medium mb-1">This is card Title</h4>
    <p>This is card description.</p>
</div>