DEV Community

ReadymadeUI
ReadymadeUI

Posted on

Creating a Product Overview Layout Using Tailwind CSS

#productoverview #tailwindcss #productdetaildesign #ui

Image description

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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)