product details #01
Simple details with CTA
1
Color options
Customize your colors.
<section>
<div class="px-8 py-24 mx-auto md:px-12 lg:px-24 max-w-7xl relative">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-8 items-center">
<!-- Product Image Gallery -->
<img
src="/store/shoes/airmax/1.png"
class="size-full aspect-[16/10] object-cover object-center rounded-2xl lg:col-span-2"
alt="Product image"
/>
<!-- Product Details -->
<div class="flex flex-col gap-8">
<div>
<p class="text-4xl sm:text-4xl md:text-5xl lg:text-6xl">$190</p>
<h1 class="text-xl md:text-2xl lg:text-3xl font-medium mt-12">
Nike Air Max
</h1>
<p class="text-base text-base-500 mt-1">Black</p>
<p class="text-base text-base-500 mt-4 lg:text-balance">
Hitting the field in the late '60s, adidas airmaxS quickly became
soccer's "it" shoe.
</p>
</div>
<!-- Action Buttons -->
<div class="flex mt-8">
<button
class="flex items-center justify-center text-center text-shadow-2xs font-semibold shadow-md ring inset-shadow-2xs hover:shadow-none items-center duration-300 ease-in-out transition-all focus:outline-2 outline-offset-2 focus:ring-offset-white text-white shadow-base-500/30 inset-shadow-white/30 text-shadow-base-700 ring-base-700 bg-linear-to-b from-base-700 to-base-800 to-70% focus:outline-base-700 h-9 px-4 py-2 text-sm rounded-md"
>
Add to Cart
</button>
</div>
</div>
</div>
</div>
</section>