React Tailwind Category Card Component

Our e-commerce, blog, or any listing site is incomplete without categories.

Today, I am going to share a Category Card component built in React with Tailwind CSS, keeping best practices in mind.

You can freely use this component in your React and Next.js app.

Category Card Component UI

This is how our Category Card component UI looks:

Category Card UI

Category Card Component Code

Here's the code for our Category Card component:


1import React from 'react'
2
3interface CategoryProps {
4  imageSrc: string
5  altText: string
6  categoryName: string
7}
8
9const Category: React.FC<CategoryProps> = ({
10  imageSrc,
11  altText,
12  categoryName,
13}) => {
14  return (
15    <a className="flex cursor-pointer flex-col">
16      <figure className="relative h-[86px] w-[86px] overflow-hidden rounded-full bg-[#F4F4F5] transition-colors duration-300 hover:bg-[#e0e0e0]">
17        <img
18          className="absolute inset-0 h-full w-full transform rounded-md object-contain p-4 transition-transform duration-300 ease-in-out hover:scale-110"
19          src={imageSrc}
20          alt={altText}
21        />
22      </figure>
23      <h3 className="mt-3 text-center text-base font-semibold text-slate-500">
24        {categoryName}
25      </h3>
26    </a>
27  )
28}
29
30export default Category

Just like Blog list component, we have a CategoryList component that will render all the categories and make it easier to use this component in other parts of our app.

Category List Component

Here's the code for our Category List component:


1import React from 'react'
2import Category from './Category'
3
4interface CategoryListProps {
5  categories: { imageSrc: string; altText: string; categoryName: string }[]
6}
7
8const CategoryList: React.FC<CategoryListProps> = ({ categories }) => {
9  return (
10    <section className="py-8">
11      <h2 className="mb-7 text-center text-2xl font-bold text-stone-900">
12        Categories
13      </h2>
14      <div className="flex flex-wrap justify-center gap-6 md:gap-10">
15        {categories.map((category, index) => (
16          <Category
17            key={index}
18            imageSrc={category.imageSrc}
19            altText={category.altText}
20            categoryName={category.categoryName}
21          />
22        ))}
23      </div>
24    </section>
25  )
26}
27
28export default CategoryList

How to Use It

Here's how we can use the CategoryList component by passing an array of categories:

Category Data

This is a dummy data we are going to pass in our category list component. You can replace it with your own data.


1const categories = [
2  {
3    imageSrc:
4      'https://cdn.pixabay.com/photo/2017/09/02/22/10/dolphin-2708695_1280.png',
5    altText: 'JavaScript logo',
6    categoryName: 'Sea Food',
7  },
8  {
9    imageSrc:
10      'https://cdn.pixabay.com/photo/2024/05/16/09/15/tea-8765473_1280.png',
11    altText: 'TypeScript logo',
12    categoryName: 'Cutlery',
13  },
14  {
15    imageSrc:
16      'https://cdn.pixabay.com/photo/2017/05/31/11/28/the-cup-2360104_1280.png',
17    altText: 'TypeScript logo',
18    categoryName: 'Tea',
19  },
20  {
21    imageSrc:
22      'https://cdn.pixabay.com/photo/2017/07/29/18/42/wooden-box-2552370_1280.png',
23    altText: 'JavaScript logo',
24    categoryName: 'Treasure Box',
25  },
26  {
27    imageSrc:
28      'https://cdn.pixabay.com/photo/2017/09/17/02/02/png-2757379_1280.png',
29    altText: 'JavaScript logo',
30    categoryName: 'Vehicles',
31  },
32  {
33    imageSrc:
34      'https://cdn.pixabay.com/photo/2016/02/23/17/44/apple-1218166_1280.png',
35    altText: 'TypeScript logo',
36    categoryName: 'Fruits',
37  },
38]


1function App() {
2  return (
3    <>
4      <Navbar />
5      <Header title={title} description={description} />
6      <div className="mx-auto max-w-6xl px-3">
7        <CategoryList categories={categories} />
8
9        <SectionHeading
10          title="Popular Articles"
11          subtitle="Diverse Range of articles related to html css and javascript"
12        />
13        <BlogList posts={posts} />
14
15        <Faq items={Faqs} />
16        <Newsletter />
17      </div>
18      <Footer />
19    </>
20  )
21}
22
23export default App