Designing Product List with Tailwind CSS

Hello developers! Today, we will learn how to design a product listing UI for e-commerce websites using Tailwind CSS.
We’ll make it both visually appealing and fully responsive for any screen size.
To achieve this, we’ll utilize the grid system to create columns for larger screens and adapt the layout seamlessly for smaller screen sizes.

Getting started

<div class="font-sans p-4 mx-auto lg:max-w-6xl md:max-w-3xl">
  <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-6">

• The outer <div> sets the section's maximum width for large and medium screens using lg:max-w-6xl and md:max-w-3xl, ensuring it stays centered (mx-auto) and has proper padding (p-4).

• The inner <div> uses the grid class to create a flexible grid layout for the product listing.

For responsiveness

• lg:grid-cols-4: Displays 4 columns on screens larger than 1024px.

• sm:grid-cols-3: Displays 3 columns on screens larger than 640px.

• grid-cols-2: Displays 2 columns on smaller (mobile) screens.

• This setup ensures that the product listing UI is fully responsive and adapts seamlessly across different screen sizes.

Now let's create the column

<div class="bg-white flex flex-col overflow-hidden cursor-pointer hover:shadow-md transition-all">

• flex flex-col: Arranges the elements inside the card in a vertical column.

• overflow-hidden: Hides any overflow content to maintain a clean layout.

• hover:shadow-md transition-all: Adds a subtle shadow effect on hover with smooth transitions.

Product image section

<div class="w-full">
  <img src="..." alt="Product 1" class="w-full object-cover object-top aspect-[230/307]" />
</div>

• w-full: Makes the image take up the full width of its container.

• object-cover object-top: Ensures the image covers the container while keeping its top aligned.

• aspect-[230/307]: Maintains the aspect ratio of the image.

Product Details

<div class="p-2 flex-1 flex flex-col">

• p-2: Adds padding around the content.

• flex-1: Ensures the details section takes up available space in the card.

• flex flex-col: Arranges the content vertically.

Product Title and Description

<h5 class="text-sm sm:text-base font-bold text-gray-800 truncate">Lexicon Luxe</h5>
<p class="mt-1 text-gray-500 truncate">Teal Green Georgette Saree with Embroidery</p>

• truncate: Trims text with ellipsis if it overflows.

• text-sm sm:text-base: Dynamically adjusts text size for different screen sizes.

Pricing and Rating Section

<div class="flex gap-2">
  <h6 class="text-sm sm:text-base font-bold text-gray-800">$10</h6>
  <h6 class="text-sm sm:text-base text-gray-500"><strike>$15</strike></h6>
</div>

<div class="flex items-center gap-0.5">
  <svg class="w-[14px] h-[14px] fill-blue-600">...</svg>
  <!-- Repeat SVG for rating stars -->
</div>

• Displays the product price and a strikethrough for the original price.

• flex items-center gap-0.5: Align the rating icons in a row with 2px gap.

• Uses SVG icons to visually represent the product rating.

• fill-blue-600: Fills active stars with blue, while inactive stars use a lighter color.

Action Buttons

<div class="flex items-center gap-2 mt-4">
  <div class="bg-pink-100 hover:bg-pink-200 w-12 h-9 flex items-center justify-center rounded cursor-pointer" title="Wishlist">
    <svg class="fill-pink-600">...</svg>
  </div>
  <button type="button" class="text-sm px-2 min-h-[36px] w-full bg-blue-600 hover:bg-blue-700 text-white tracking-wide ml-auto outline-none border-none rounded">Add to cart</button>
</div>

1: Wishlist Icon

A pink heart icon that changes to a lighter shade on hover.
rounded: Gives the icon a rounded shape.

2: Add to Cart Button

• bg-blue-600 hover:bg-blue-700: Adds a hover effect with a darker blue background.

• tracking-wide: Slightly increases letter spacing for better readability.

Key Features

• Responsive Design: Text, images, and layout adjust for different screen sizes using Tailwind classes.

• Hover Effects: Enhances user interactivity with smooth transitions.

• Truncated Text: Ensures the layout remains clean and prevents overflow.

• Actionable UI: Includes a wishlist icon and an "Add to cart" button for e-commerce functionality.

Thanks for reading!

Visit ReadymadeUI for the Full Code

Use ReadymadeUI components library and explore a variety of ready-to-use UI components and templates to speed up your design process!