- Published on
Beginners Guide: Build A Prodcut List With Tailwind CSS
- What is Tailwind CSS?
- The description of Product List UI component
- Why use Tailwind CSS to create a Product List UI component?
- The preview of Product List UI component
- The source code of Product List UI component
- How to create a Product List with Tailwind CSS?
- Step 1: Set up your HTML structure
- Step 2: Style the product list with Tailwind CSS classes
- Step 3: Add your products to the list
- Conclusion
As a beginner in FrontEnd development, it can be challenging to create a professional-looking UI component. However, with the help of Tailwind CSS, you can easily create a product list that looks great and is easy to use. In this article, we will guide you through the process of building a product list with Tailwind CSS.
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that makes it easy to create responsive and customizable UI components. It provides a set of pre-defined CSS classes that you can use to style your HTML elements. With Tailwind CSS, you don't have to write custom CSS code, which saves you time and effort.
The description of Product List UI component
A product list is a UI component that displays a list of products with their images, names, descriptions, and prices. It is commonly used in e-commerce websites to showcase products to customers. A product list should be visually appealing, easy to navigate, and responsive.
Why use Tailwind CSS to create a Product List UI component?
Tailwind CSS provides a set of pre-defined CSS classes that you can use to style your HTML elements. This means that you don't have to write custom CSS code, which saves you time and effort. Additionally, Tailwind CSS is highly customizable, which means that you can easily modify the styles to match your design requirements.
The preview of Product List UI component
To create a product list with Tailwind CSS, we will use a combination of HTML and CSS classes. The final product list will look something like this:
Free download of the Prodcut List's source code
The source code of Product List UI component
To create the product list, we will use a combination of HTML and Tailwind CSS classes. The source code for the product list is as follows:
<!-- component -->
<div>
<div class="px-10 py-20 bg-gray-100 grid gap-10 lg:grid-cols-3 xl:grid-cols-4 sm:grid-cols-2">
<div class="max-w-xs rounded-md overflow-hidden shadow-lg hover:scale-105 transition duration-500 cursor-pointer">
<div>
<img src="https://www.apple.com/newsroom/images/product/mac/standard/Apple_MacBook-Pro_16-inch-Screen_10182021_big_carousel.jpg.large.jpg" alt="" />
</div>
<div class="py-4 px-4 bg-white">
<h3 class="text-md font-semibold text-gray-600">Apple MacBook Pro M1 13.3" Silver 16GB/512GB (MYDC2FN/A-16GB)</h3>
<p class="mt-4 text-lg font-thin">$ 2400</p>
<span class="flex items-center justify-center mt-4 w-full bg-yellow-400 hover:bg-yellow-500 py-1 rounded">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
<button class="font-semibold text-gray-800">Add to Basket</button>
</span>
</div>
</div>
<div class="max-w-xs rounded-md overflow-hidden shadow-lg hover:scale-105 transition duration-500 cursor-pointer">
<div>
<img src="https://media.cnn.com/api/v1/images/stellar/prod/201116214440-9-macbook-air-review-silicon-underscoredjpg.jpg?q=w_2615,h_1556,x_0,y_0,c_fill" alt="" />
</div>
<div class="py-4 px-4 bg-white">
<h3 class="text-md font-semibold text-gray-600">Apple MacBook Pro M1 13.3" Silver 16GB/512GB (MYDC2FN/A-16GB)</h3>
<p class="mt-4 text-lg font-thin">$ 2400</p>
<span class="flex items-center justify-center mt-4 w-full bg-yellow-400 hover:bg-yellow-500 py-1 rounded">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
<button class="font-semibold text-gray-800">Add to Basket</button>
</span>
</div>
</div>
<div class="max-w-xs rounded-md overflow-hidden shadow-lg hover:scale-105 transition duration-500 cursor-pointer">
<div>
<img src="https://www.macworld.com/wp-content/uploads/2022/01/macbook-pro-compare.jpg?quality=50&strip=all&w=1024" alt="" />
</div>
<div class="py-4 px-4 bg-white">
<h3 class="text-md font-semibold text-gray-600">Apple MacBook Pro M1 13.3" Silver 16GB/512GB (MYDC2FN/A-16GB)</h3>
<p class="mt-4 text-lg font-thin">$ 2400</p>
<span class="flex items-center justify-center mt-4 w-full bg-yellow-400 hover:bg-yellow-500 py-1 rounded">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
<button class="font-semibold text-gray-800">Add to Basket</button>
</span>
</div>
</div>
<div class="max-w-xs rounded-md overflow-hidden shadow-lg hover:scale-105 transition duration-500 cursor-pointer">
<div>
<img src="https://img.republicworld.com/republic-prod/stories/promolarge/xhdpi/g1jzwrwrlfim5wux_1623141909.jpeg" alt="" />
</div>
<div class="py-4 px-4 bg-white">
<h3 class="text-md font-semibold text-gray-600">Apple MacBook Pro M1 13.3" Silver 16GB/512GB (MYDC2FN/A-16GB)</h3>
<p class="mt-4 text-lg font-thin">$ 2400</p>
<span class="flex items-center justify-center mt-4 w-full bg-yellow-400 hover:bg-yellow-500 py-1 rounded">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
<button class="font-semibold text-gray-800">Add to Basket</button>
</span>
</div>
</div>
<div class="max-w-xs rounded-md overflow-hidden shadow-lg hover:scale-105 transition duration-500 cursor-pointer">
<div>
<img src="https://cdn.mos.cms.futurecdn.net/GfinEMFXnT42BFxAcDc2rA.jpg" alt="" />
</div>
<div class="py-4 px-4 bg-white">
<h3 class="text-md font-semibold text-gray-600">Apple MacBook Pro M1 13.3" Silver 16GB/512GB (MYDC2FN/A-16GB)</h3>
<p class="mt-4 text-lg font-thin">$ 2400</p>
<span class="flex items-center justify-center mt-4 w-full bg-yellow-400 hover:bg-yellow-500 py-1 rounded">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
<button class="font-semibold text-gray-800">Add to Basket</button>
</span>
</div>
</div>
<div class="max-w-xs rounded-md overflow-hidden shadow-lg hover:scale-105 transition duration-500 cursor-pointer">
<div>
<img src="https://images.indianexpress.com/2021/12/macbook-pro-2021-review-featured-image.jpg" alt="" />
</div>
<div class="py-4 px-4 bg-white">
<h3 class="text-md font-semibold text-gray-600">Apple MacBook Pro M1 13.3" Silver 16GB/512GB (MYDC2FN/A-16GB)</h3>
<p class="mt-4 text-lg font-thin">$ 2400</p>
<span class="flex items-center justify-center mt-4 w-full bg-yellow-400 hover:bg-yellow-500 py-1 rounded">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
<button class="font-semibold text-gray-800">Add to Basket</button>
</span>
</div>
</div>
</div>
</div>
How to create a Product List with Tailwind CSS?
To create a product list with Tailwind CSS, follow these steps:
Step 1: Set up your HTML structure
The first step is to set up your HTML structure. We will use an unordered list (ul) to display the products. Each product will be displayed in a list item (li) element. Here's the HTML code:
<ul class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<li class="bg-white shadow rounded-lg overflow-hidden">
<img src="product1.jpg" alt="Product 1" class="w-full">
<div class="p-4">
<h3 class="font-medium text-gray-900">Product 1</h3>
<p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus neque.</p>
<div class="mt-4">
<span class="text-gray-900 font-medium">$19.99</span>
<span class="ml-2 text-sm text-gray-600">/mo</span>
</div>
</div>
</li>
<!-- Add more products here -->
</ul>
In this code, we have used the grid and grid-cols classes to create a responsive grid layout. The gap-4 class adds a 1rem gap between the grid items.
Step 2: Style the product list with Tailwind CSS classes
Now that we have set up our HTML structure, we can start styling the product list using Tailwind CSS classes. Here's the CSS code:
/* Set the font family */
body {
font-family: 'Open Sans', sans-serif;
}
/* Style the product list */
ul {
list-style: none;
}
li {
transition: all 0.3s ease-in-out;
}
li:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
/* Style the product image */
img {
height: 200px;
object-fit: cover;
}
/* Style the product title */
h3 {
font-size: 1.25rem;
}
/* Style the product description */
p {
font-size: 0.875rem;
}
/* Style the product price */
span {
font-size: 1.125rem;
}
In this code, we have used various Tailwind CSS classes to style the product list. For example, we have used the shadow and rounded-lg classes to add a shadow and rounded corners to the list item. We have also used the hover class to add a hover effect to the list item.
Step 3: Add your products to the list
Finally, you can add your products to the list by duplicating the list item and modifying the content. Here's an example:
<ul class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<li class="bg-white shadow rounded-lg overflow-hidden">
<img src="product1.jpg" alt="Product 1" class="w-full">
<div class="p-4">
<h3 class="font-medium text-gray-900">Product 1</h3>
<p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus neque.</p>
<div class="mt-4">
<span class="text-gray-900 font-medium">$19.99</span>
<span class="ml-2 text-sm text-gray-600">/mo</span>
</div>
</div>
</li>
<li class="bg-white shadow rounded-lg overflow-hidden">
<img src="product2.jpg" alt="Product 2" class="w-full">
<div class="p-4">
<h3 class="font-medium text-gray-900">Product 2</h3>
<p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus neque.</p>
<div class="mt-4">
<span class="text-gray-900 font-medium">$29.99</span>
<span class="ml-2 text-sm text-gray-600">/mo</span>
</div>
</div>
</li>
<!-- Add more products here -->
</ul>
Conclusion
In this article, we have shown you how to create a product list with Tailwind CSS. We have explained the benefits of using Tailwind CSS and provided you with the source code and preview of the product list. With the help of this guide, you can easily create a professional-looking product list for your e-commerce website.