Product Page Using Tailwind UI
A ‘Detail Product Page’ component crafted with Tailwind provides an informative and visually engaging platform for users to explore and learn about a product in depth, enhancing their overall shopping experience.
product
Loading component...
160 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=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
body {
font-family: "Plus Jakarta Sans", sans-serif;
}
</style>
<!-- inspired design by https://dribbble.com/shots/14127375-Product-Page -->
<section class="py-12 sm:py-16">
<div class="container px-4 mx-auto">
<nav class="flex">
<ol role="list" class="flex items-center uppercase">
<li class="text-left">
<div class="-m-1">
<a href="#"
class="p-1 text-sm font-medium text-gray-600 rounded-md focus:text-gray-900 focus:shadow hover:text-gray-800">
Home </a>
</div>
</li>
<li class="text-left">
<div class="flex items-center">
<span class="mx-2 text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</span>
<div class="-m-1">
<a href="#"
class="p-1 text-sm font-medium text-gray-600 rounded-md focus:text-gray-900 focus:shadow hover:text-gray-800">
Kitchen </a>
</div>
</div>
</li>
<li class="text-left">
<div class="flex items-center">
<span class="mx-2 text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</span>
<div class="-m-1">
<a href="#"
class="p-1 text-sm font-medium text-gray-600 rounded-md focus:text-gray-900 focus:shadow hover:text-gray-800"
aria-current="page"> Tools </a>
</div>
</div>
</li>
</ol>
</nav>
<div class="grid grid-cols-1 gap-12 mt-8 lg:col-gap-12 xl:col-gap-16 lg:mt-12 lg:grid-cols-5 lg:gap-16">
<div class="lg:col-span-3 lg:row-end-1">
<div class="">
<div class="lg:order-2 lg:ml-5 ">
<div class="max-w-2xl mx-auto overflow-hidden rounded-lg">
<img class="object-cover w-full h-full max-w-full"
src="https://images.unsplash.com/photo-1587377224035-72144bf39e53?auto=format&fit=crop&q=80&w=1470&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="" />
</div>
</div>
<div class="w-full mt-2">
<div class="flex flex-row items-start justify-center pl-6 md:justify-start">
<button type="button"
class="mr-4 overflow-hidden text-center border-2 border-blue-500 rounded-lg flex-0 aspect-square h-36">
<img class="object-cover w-full h-full"
src="https://images.unsplash.com/photo-1587377224271-165f8205528a?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwcm9maWxlLXBhZ2V8NzJ8fHxlbnwwfHx8fHw%3D"
alt="" />
</button>
<button type="button"
class="mr-4 overflow-hidden text-center border-2 border-transparent rounded-lg flex-0 aspect-square h-36 hover:border-blue-500">
<img class="object-cover w-full h-full"
src="https://images.unsplash.com/photo-1587377224051-2d0f78469471?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwcm9maWxlLXBhZ2V8NzV8fHxlbnwwfHx8fHw%3D"
alt="" />
</button>
<button type="button"
class="overflow-hidden text-center border-2 border-transparent rounded-lg flex-0 aspect-square h-36 hover:border-blue-500">
<img class="object-cover w-full h-full"
src="https://images.unsplash.com/photo-1587377224213-0bb48376e715?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwcm9maWxlLXBhZ2V8Nzd8fHxlbnwwfHx8fHw%3D"
alt="" />
</button>
</div>
</div>
</div>
</div>
<div class="lg:col-span-3 lg:row-span-2 lg:row-end-2">
<h1 class="font-bold leading-9 text-gray-900 sm:text-3xl">Small Saucepan Porridge <br>
Cooking
Pot</h1>
<p class="mt-2 text-sm font-medium text-gray-900 uppercase">by <span
class="font-semibold text-blue-500">A Company</span></p>
<div class="flex items-center mt-8">
<p class="p-4 mr-4 text-4xl font-bold text-blue-900 rounded-lg bg-blue-50"><span
class="text-lg text-blue-600 align-top">$</span>25</p>
<p class="flex flex-col">
<span class="text-xl font-semibold text-green-500">Save 12%</span>
<span class="text-sm text-gray-600">Inclusive of all Taxe</span>
</p>
</div>
<p class="mt-8 text-base text-gray-600">
Stainless steel material, flat bottom, conduction and uniform heating, making cooking Suitable
for any stovetop, including
</p>
<div
class="flex flex-col items-center justify-between py-4 mt-10 border-t border-b sm:flex-row sm:space-y-0">
<div class="flex items-end">
<h1 class="text-3xl font-bold">$60.50</h1>
</div>
</div>
<div class="flex flex-col items-center justify-between py-4 mt-10 space-y-4 sm:flex-row sm:space-y-0">
<div class="flex items-end">
<div class="flex items-center ml-6">
<span class="mr-3">QTY</span>
<div class="relative">
<select
class="py-2 pl-3 pr-10 text-base border border-gray-300 rounded appearance-none focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
<span
class="absolute top-0 right-0 flex items-center justify-center w-10 h-full text-center text-gray-600 pointer-events-none">
<svg fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" class="w-4 h-4" viewBox="0 0 24 24">
<path d="M6 9l6 6 6-6"></path>
</svg>
</span>
</div>
</div>
</div>
<button type="button"
class="inline-flex items-center justify-center px-12 py-3 text-base font-bold text-center text-white transition-all duration-200 ease-in-out bg-blue-600 border-2 border-transparent rounded-md bg-none focus:shadow hover:bg-gray-800">
Add to cart
</button>
</div>
</div>
</div>
</div>
</section>