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:

import React from 'react'

interface CategoryProps {
  imageSrc: string
  altText: string
  categoryName: string
}

const Category: React.FC<CategoryProps> = ({
  imageSrc,
  altText,
  categoryName,
}) => {
  return (
    <a className="flex cursor-pointer flex-col">
      <figure className="relative h-[86px] w-[86px] overflow-hidden rounded-full bg-[#F4F4F5] transition-colors duration-300 hover:bg-[#e0e0e0]">
        <img
          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"
          src={imageSrc}
          alt={altText}
        />
      </figure>
      <h3 className="mt-3 text-center text-base font-semibold text-slate-500">
        {categoryName}
      </h3>
    </a>
  )
}

export 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:

import React from 'react'
import Category from './Category'

interface CategoryListProps {
  categories: { imageSrc: string; altText: string; categoryName: string }[]
}

const CategoryList: React.FC<CategoryListProps> = ({ categories }) => {
  return (
    <section className="py-8">
      <h2 className="mb-7 text-center text-2xl font-bold text-stone-900">
        Categories
      </h2>
      <div className="flex flex-wrap justify-center gap-6 md:gap-10">
        {categories.map((category, index) => (
          <Category
            key={index}
            imageSrc={category.imageSrc}
            altText={category.altText}
            categoryName={category.categoryName}
          />
        ))}
      </div>
    </section>
  )
}

export 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.

const categories = [
  {
    imageSrc:
      'https://cdn.pixabay.com/photo/2017/09/02/22/10/dolphin-2708695_1280.png',
    altText: 'JavaScript logo',
    categoryName: 'Sea Food',
  },
  {
    imageSrc:
      'https://cdn.pixabay.com/photo/2024/05/16/09/15/tea-8765473_1280.png',
    altText: 'TypeScript logo',
    categoryName: 'Cutlery',
  },
  {
    imageSrc:
      'https://cdn.pixabay.com/photo/2017/05/31/11/28/the-cup-2360104_1280.png',
    altText: 'TypeScript logo',
    categoryName: 'Tea',
  },
  {
    imageSrc:
      'https://cdn.pixabay.com/photo/2017/07/29/18/42/wooden-box-2552370_1280.png',
    altText: 'JavaScript logo',
    categoryName: 'Treasure Box',
  },
  {
    imageSrc:
      'https://cdn.pixabay.com/photo/2017/09/17/02/02/png-2757379_1280.png',
    altText: 'JavaScript logo',
    categoryName: 'Vehicles',
  },
  {
    imageSrc:
      'https://cdn.pixabay.com/photo/2016/02/23/17/44/apple-1218166_1280.png',
    altText: 'TypeScript logo',
    categoryName: 'Fruits',
  },
]

function App() {
  return (
    <>
      <Navbar />
      <Header title={title} description={description} />
      <div className="mx-auto max-w-6xl px-3">
        <CategoryList categories={categories} />

        <SectionHeading
          title="Popular Articles"
          subtitle="Diverse Range of articles related to html css and javascript"
        />
        <BlogList posts={posts} />

        <Faq items={Faqs} />
        <Newsletter />
      </div>
      <Footer />
    </>
  )
}

export default App