Product card components built with Tailwind CSS and Flowbite

One of the most important sections and components of an e-commerce website is listing the products on the homepage or category page of a certain type of product. Within these cards you show images, names of the product, the price, reviews, buttons to add to the cart and more.

Web development has grown a lot in the past years and e-commerce is an area that is crucial to know and understand as a developer since more and more people resort to purchasing online compared to traditional methods in shopping malls and stores.

These components are all built only with the classes from Tailwind CSS and they leverage the design system and JS interactivity from the Flowbite framework and UI library.

Without further ado, let's check these components!

Default list of product cards

Use this example to show a list of product cards that feature a title, image, promotion badge, add to favorites and cart buttons, price, and list of reviews.

This example is free and open-source.

• Source code and example

Product cards with carousel

Use this example to show two product cards inside of a carousel component that features product images, description, reviews, pricing, color and quantity selection and add to cart buttons.

• Source code and example

Product cards with sidebar filters

This example can be used to show a sidebar with filters next to the product cards that feature size and color selection, images, prices, add to cart buttons, and more.

• Source code and example

Product cards with grid view

Use this example to show product cards within a grid layout and use filter options inside of a drawer component where you can search based on price, rating, color, size, and more.

• Source code and example

Advanced product cards with filters

Use this example to show an advanced settings bar with filter and sorting options and then a list of product cards with images inside a carousel, product title, pricing, CTA buttons, and more.

• Source code and example

Credits

These components could not have been built without the usage of the following awesome open-source frameworks, UI libraries, and resources:

• Tailwind CSS

• Flowbite

• Flowbite Icons