Detail Product Ecommerce Using Tailwind UI
An intricate eCommerce product detail page thoughtfully crafted with Tailwind, seamlessly blending style and information to offer a captivating and informative user experience.
other
Loading component...
106 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://www.beatsbydre.com/earbuds/studio-buds-plus-wireless-noise-cancelling?sku=MT2Q3 -->
<section class="overflow-hidden text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-wrap mx-auto lg:w-full">
<div class="items-center hidden w-1/6 grid-cols-1 grid-rows-5 gap-2 pr-4 lg:grid">
<img class="w-24 h-24 border-2 border-black rounded-md justify-self-end hover:border-gray-400"
src="https://www.beatsbydre.com/content/dam/beats/web/product/earbuds/studio-buds-plus/pdp/product-carousel/cosmic-pink/pc-le-studiobudsplus-cosmic-pink-case-open-floating.jpg"
alt="Image 1">
<img class="w-24 h-24 border-2 border-black rounded-md justify-self-end hover:border-gray-400"
src="https://www.beatsbydre.com/content/dam/beats/web/product/earbuds/studio-buds-plus/pdp/product-carousel/cosmic-pink/pc-le-studiobudsplus-cosmic-pink-earbuds-inside-outside.jpg"
alt="Image 2">
<img class="w-24 h-24 border-2 border-black rounded-md justify-self-end hover:border-gray-400"
src="https://www.beatsbydre.com/content/dam/beats/web/product/earbuds/studio-buds-plus/pdp/product-carousel/cosmic-pink/pc-le-studiobudsplus-cosmic-pink-earbuds-b-logo.jpg"
alt="Image 3">
<img class="w-24 h-24 border-2 border-black rounded-md justify-self-end hover:border-gray-400"
src="https://www.beatsbydre.com/content/dam/beats/web/product/earbuds/studio-buds-plus/pdp/product-carousel/cosmic-pink/pc-le-studiobudsplus-cosmic-pink-case-open.jpg"
alt="Image 4">
<img class="w-24 h-24 border-2 border-black rounded-md justify-self-end hover:border-gray-400"
src="https://www.beatsbydre.com/content/dam/beats/web/product/earbuds/studio-buds-plus/pdp/product-carousel/cosmic-pink/pc-le-studiobudsplus-cosmic-pink-case-charger.jpg"
alt="Image 5">
</div>
<div class="w-full lg:w-3/6 md:w-3/6">
<img alt="main image" class="object-cover object-center w-full h-auto rounded"
src="https://www.beatsbydre.com/content/dam/beats/web/product/earbuds/studio-buds-plus/pdp/product-carousel/cosmic-pink/pc-le-studiobudsplus-cosmic-pink-case-open-floating.jpg">
<div class="grid justify-center grid-cols-5 grid-rows-1 pt-4 lg:hidden">
<img class="w-12 h-12 border-2 border-black rounded-md justify-self-center hover:border-gray-400"
src="https://www.beatsbydre.com/content/dam/beats/web/product/earbuds/studio-buds-plus/pdp/product-carousel/cosmic-pink/pc-le-studiobudsplus-cosmic-pink-case-open-floating.jpg"
alt="Image 1">
<img class="w-12 h-12 border-2 border-black rounded-md justify-self-center hover:border-gray-400"
src="https://www.beatsbydre.com/content/dam/beats/web/product/earbuds/studio-buds-plus/pdp/product-carousel/cosmic-pink/pc-le-studiobudsplus-cosmic-pink-earbuds-inside-outside.jpg"
alt="Image 2">
<img class="w-12 h-12 border-2 border-black rounded-md justify-self-center hover:border-gray-400"
src="https://www.beatsbydre.com/content/dam/beats/web/product/earbuds/studio-buds-plus/pdp/product-carousel/cosmic-pink/pc-le-studiobudsplus-cosmic-pink-earbuds-b-logo.jpg"
alt="Image 3">
<img class="w-12 h-12 border-2 border-black rounded-md justify-self-center hover:border-gray-400"
src="https://www.beatsbydre.com/content/dam/beats/web/product/earbuds/studio-buds-plus/pdp/product-carousel/cosmic-pink/pc-le-studiobudsplus-cosmic-pink-case-open.jpg"
alt="Image 4">
<img class="w-12 h-12 border-2 border-black rounded-md justify-self-center hover:border-gray-400"
src="https://www.beatsbydre.com/content/dam/beats/web/product/earbuds/studio-buds-plus/pdp/product-carousel/cosmic-pink/pc-le-studiobudsplus-cosmic-pink-case-charger.jpg"
alt="Image 5">
</div>
</div>
<div class="w-full mt-6 lg:w-2/6 md:w-3/6 lg:pl-10 lg:py-6 lg:mt-0">
<span class="mb-2 text-base font-semibold text-red-500">NEW</span>
<h1 class="mb-2 text-4xl font-bold text-black title-font">Beats Studio Buds +</h1>
<h2 class="mb-8 text-xl font-semibold text-black">Powerful Sound. Perfect Fit.</h2>
<h2 class="mb-8 text-2xl font-semibold text-black title-font">$169.99</h2>
<span class="text-base text-black">Color: <span class="font-bold">Cosmic Pink</span></span>
<div class="flex gap-2 mt-4">
<button class="border border-gray-300 ml-1 bg-[#2b2b2b] rounded-full w-10 h-10 focus:outline-none"></button>
<button class="border border-gray-300 ml-1 bg-[#f2ede7] rounded-full w-10 h-10 focus:outline-none"></button>
<button class="border border-gray-300 ml-1 bg-[#b4b7c5] rounded-full w-10 h-10 focus:outline-none"></button>
<button
class="border-2 border-green-300 ml-1 bg-[#caa1a4] rounded-full w-10 h-10 focus:outline-none"></button>
<button class="border border-gray-300 ml-1 bg-[#9c9c9e] rounded-full w-10 h-10 focus:outline-none"></button>
</div>
<button
class="block w-full px-6 py-2 mx-auto my-8 text-white uppercase bg-black border border-black rounded-full hover:bg-white hover:text-black">Notify
Me</button>
<hr class="my-4">
<div class="space-y-4 text-black">
<div class="flex items-center justify-center">
<img class="w-6 h-6 mr-4"
src="https://www.beatsbydre.com/content/dam/beats/web/common/icons/apple-value-props/free-shipping-icon.png"
alt="">
<div>
<h1 class="text-base font-semibold">Free Shipping and Returns</h1>
<p class="mt-1 text-base">Enjoy free 2-day delivery and 14-day returns.</p>
</div>
</div>
<div class="flex items-center justify-center">
<img class="w-6 h-6 mr-4"
src="https://www.beatsbydre.com/content/dam/beats/web/common/icons/apple-value-props/in-store-pickup-icon.png"
alt="">
<div>
<h1 class="text-base font-semibold">In-Store Pickup</h1>
<p class="mt-1 text-base">Pick up your Beats at an Apple Store near you.</p>
</div>
</div>
<div class="flex items-center justify-center">
<img class="w-6 h-6 mr-4"
src="https://www.beatsbydre.com/content/dam/beats/web/common/icons/apple-value-props/apple-music-icon.png"
alt="">
<div>
<h1 class="text-base font-semibold">Free Apple Music Trial</h1>
<p class="mt-1 text-base">Get 6 months of access to over 100 million songs, ad-free.*</p>
</div>
</div>
</div>
<hr class="my-4">
</div>
</div>
</div>
</section>