Card Product Using Tailwind UI
A product card created with Tailwind is an elegant and responsive display that makes it easy to showcase products with a modern flai.
card
Loading component...
92 lines
<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>