Creating a Product Overview Layout Using Tailwind CSS

Introduction

Hello, developers! Today, we’ll learn how to build a responsive product detail layout using Tailwind CSS.
We’ll divide the layout into two sections with a grid: a left column for product images and a right column for product details. Let’s ensure it looks great across all screen sizes!

Layout

<div class="grid items-start grid-cols-1 lg:grid-cols-2 gap-8 max-lg:gap-12 max-sm:gap-8">

grid: Uses CSS Grid to organize content.
lg:grid-cols-2: Displays two columns on large screens.
gap-8, max-lg:gap-12, max-sm:gap-8: Controls the gap between grid items across breakpoints.

Image Gallery

<div class="flex flex-row gap-2">
  <div class="flex flex-col gap-2 w-16 max-sm:w-14 shrink-0">
    <!-- Thumbnail Images -->
  </div>
  <div class="flex-1">
    <!-- Main Product Image -->
  </div>
</div>

Thumbnail Column:

Displays a vertical list of small images.
aspect-[64/85] object-cover: Ensures the aspect ratio of images is maintained while covering the container.

Main Image:

Enlarges the selected product image.
aspect-[548/712]: Maintains a taller aspect ratio.

Product Description

<h3 class="text-lg sm:text-xl font-bold text-gray-800">Women Embroidered A-line Kurta</h3>
<p class="text-gray-500 mt-1 text-sm">Women Embroidered Georgette A-line Kurta With Attached Dupatta (Maroon)</p>

Displays the product title and description.

Pricing Section

<div class="flex items-center flex-wrap gap-4 mt-4">
  <h4 class="text-gray-800 text-2xl sm:text-3xl font-bold">$12</h4>
  <p class="text-gray-500 text-lg"><strike>$16</strike> <span class="text-sm ml-1.5">Tax included</span></p>
</div>

Shows the discounted price, original price (strikethrough), and tax information.
flex flex-wrap gap-4: Arranges the pricing details horizontally.

Rating Section

<div class="flex items-center gap-1 text-lg px-2.5 bg-green-600 text-white rounded-full">
  <p>4</p>
  <svg>...</svg>
</div>

Displays the product's rating and reviews.
rounded-full: Styles the rating score as a pill-shaped element.

Size Options

<div class="flex flex-wrap gap-4 mt-4">
  <button type="button" class="w-10 h-9 border ...">SM</button>
  <button type="button" class="w-10 h-9 border ...">MD</button>
</div>

Provides buttons for size selection.

Action Buttons

<div class="mt-6 flex flex-wrap gap-4">
  <button type="button" class="px-4 py-3 w-[45%] ...">Add to wishlist</button>
  <button type="button" class="px-4 py-3 w-[45%] ...">Add to cart</button>
</div>

Includes "Add to Wishlist" and "Add to Cart" buttons with distinct styles.

Delivery Location

<div class='flex items-center gap-2 mt-4 max-w-sm'>
  <input type='number' placeholder='Enter pincode' class='bg-gray-100 ...' />
  <button type='button' class='bg-blue-600 hover:bg-blue-700 ...'>Apply</button>
</div>

Provides an input field and button for entering a pincode to check delivery availability.

Accordion for Product Information

<div role="accordion">
  <button type="button" class="w-full text-sm ...">Product details</button>
  <div class="pb-4 px-4 hidden">
    <p class="text-sm text-gray-500">Lorem ipsum...</p>
  </div>
</div>

Implements a collapsible accordion for additional product details.

Responsive Design

Uses utility classes like max-lg, max-sm, and lg:grid-cols-2 to ensure the layout adjusts to different screen sizes.

Thanks for reading!

To access the source code for this design, visit ReadymadeUI and explore more e-commerce layouts.