Card Product 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=Space+Grotesk:wght@300;400;500;600;700&display=swap"
  rel="stylesheet"
/>

<style>
  .body {
    font-family: "Space Grotesk", sans-serif;
  }
</style>

<!-- inspired design components by https://sofi.health/?ref=land-book.com-->

<section class="container p-10 px-0 mx-auto md:py-12 md:p-8 md:px-0">
  <div
    class="grid items-stretch grid-cols-1 gap-4 p-5 md:p-0 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4"
  >
    <div
      class="p-5 py-10 duration-500 transform rounded-lg cursor-pointer bg-purple-50 hover:-translate-y-2"
    >
      <h1 class="mb-2 text-4xl font-medium md:text-6xl">valerian</h1>
      <div
        class="flex items-center justify-between mb-6 font-medium text-gray-600"
      >
        <p>lat.// valeriana officinalis</p>
        <p>relax</p>
      </div>
      <img
        class="mx-auto"
        src="https://sofi.health/wp-content/themes/Sofi/assets/images/micro-website-images/Valerian-formulation.png"
        alt=""
      />
      <hr class="my-6" />
      <div class="flex items-center justify-between font-medium text-gray-600">
        <p>target state: <span class="font-bold text-gray-800">sleep</span></p>
        <p>impact: <span class="font-bold text-gray-800">≈ 51%</span></p>
      </div>
    </div>

    <div
      class="p-5 py-10 duration-500 transform rounded-lg cursor-pointer bg-green-50 hover:-translate-y-2"
    >
      <h1 class="mb-2 text-4xl font-medium md:text-6xl">passiflora</h1>
      <div
        class="flex items-center justify-between mb-6 font-medium text-gray-600"
      >
        <p>lat.// passiflora incarnata</p>
        <p>rest</p>
      </div>
      <img
        class="mx-auto"
        src="https://sofi.health/wp-content/themes/Sofi/assets/images/micro-website-images/Passiflora-formulation.png"
        alt=""
      />
      <hr class="my-6" />
      <div class="flex items-center justify-between font-medium text-gray-600">
        <p>
          target state:
          <span class="font-bold text-gray-800">calm + sleep</span>
        </p>
        <p>
          sleep improvement: <span class="font-bold text-gray-800">2.1x%</span>
        </p>
      </div>
    </div>
    <div
      class="p-5 py-10 duration-500 transform rounded-lg cursor-pointer bg-red-50 hover:-translate-y-2"
    >
      <h1 class="mb-2 text-4xl font-medium md:text-6xl">ashwagandha</h1>
      <div
        class="flex items-center justify-between mb-6 font-medium text-gray-600"
      >
        <p>lat.// withania somnifera</p>
        <p>balance</p>
      </div>
      <img
        class="mx-auto"
        src="https://sofi.health/wp-content/themes/Sofi/assets/images/micro-website-images/Ashwagandha-formulation.png"
        alt=""
      />
      <hr class="my-6" />
      <div class="flex items-center justify-between font-medium text-gray-600">
        <p>target state: <span class="font-bold text-gray-800">calm</span></p>
        <p>confidence: <span class="font-bold text-gray-800">>95%</span></p>
      </div>
    </div>
  </div>
</section>