Simple Product Card Using Tailwind UI

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet">


<style>
  body {
    font-family: 'DM Serif Display', serif;
  }
</style>

<!-- inspired design by https://www.brewbike.com/ -->
<section class="bg-[#fff2e6]">
  <div class="px-4 py-8 space-y-6 text-center">
    <h1 class="text-5xl font-bold text-black uppercasen">GET YOUR BUZZ ON</h1>
    <p class="font-mono text-2xl font-light text-gray-900">Hot, cold, sweet or straight up, we’ve got the brew for you.
    </p>
    <button
      class="px-12 py-3 font-mono text-base uppercase border border-black md:px-24 rounded-xl hover:bg-yellow-400">All
      product</button>
  </div>
  <div
    class="flex flex-col items-stretch justify-center w-full gap-4 px-2 py-12 mx-auto flex-s md:flex-row sm:px-8 xl:px-24">
    <div class="w-full p-4 bg-white border border-gray-900 rounded-xl md:w-1/3">
      <h1 class="text-5xl font-semibold text-center text-black">CINNAMON SGR</h1>
      <img class="object-cover w-full mt-8 rounded-t-xl"
        src="https://cdn.sanity.io/images/769hkezm/production/1d9ae5ba38e69d3ebb9b869f5c88acccccb994bc-654x590.png?fm=webp"
        alt="">
      <div class="flex flex-col mt-8 space-y-4 text-center">
        <button
          class="px-4 py-3 text-gray-100 uppercase bg-black border border-black rounded-lg hover:bg-yellow-400 hover:text-black">add
          to cart - $18.00</button>
        <a href="" class="text-sm underline uppercase hover:no-underline">see product</a>
      </div>
    </div>
    <div class="w-full p-4 bg-white border border-gray-900 rounded-xl md:w-1/3">
      <h1 class="text-5xl font-semibold text-center text-black">CHOCOLATE</h1>
      <img class="object-cover w-full mt-8 rounded-t-xl"
        src="https://cdn.sanity.io/images/769hkezm/production/bdf6c6ff1d5f0710152878e504b5960a88de8b71-654x590.png?fm=webp"
        alt="">
      <div class="flex flex-col mt-8 space-y-4 text-center">
        <button
          class="px-4 py-3 text-gray-100 uppercase bg-black border border-black rounded-lg hover:bg-yellow-400 hover:text-black">add
          to cart - $18.00</button>
        <a href="" class="text-sm underline uppercase hover:no-underline">see product</a>
      </div>
    </div>
    <div class="w-full p-4 bg-white border border-gray-900 rounded-xl md:w-1/3">
      <h1 class="text-5xl font-semibold text-center text-black">ORIGINAL</h1>
      <img class="object-cover w-full mt-8 rounded-t-xl"
        src="https://cdn.sanity.io/images/769hkezm/production/45e41cdecdf395e33d77139aa7331139524ebe19-654x590.png?fm=webp"
        alt="">
      <div class="flex flex-col mt-8 space-y-4 text-center">
        <button
          class="px-4 py-3 text-gray-100 uppercase bg-black border border-black rounded-lg hover:bg-yellow-400 hover:text-black">add
          to cart - $18.00</button>
        <a href="" class="text-sm underline uppercase hover:no-underline">see product</a>
      </div>
    </div>
  </div>
</section>