Building a Restaurant Category Component with Tailwind CSS in React
Tags: javascript, webdev, programming, react
Published: 2024-01-20 09:48:00

![](https://miro.medium.com/v2/resize:fit:491/1*RftiRsKYjj9R4L8CtCu0SA.png align="center")

![](https://miro.medium.com/v2/resize:fit:1688/1*_CXFtg1lF_Dp7cvcjC4Gyw.png align="left")

In the world of web development, creating visually appealing and responsive components is key to providing an engaging user experience. One way to achieve this is by using Tailwind CSS, a utility-first CSS framework, in combination with React. In this article, we’ll walk through the process of creating a beautiful Category component using Tailwind CSS and React.

# **Prerequisites**

Before we dive into the code, make sure you have the following prerequisites:

* Node.js and npm installed on your development machine.
    
* Basic knowledge of React and JavaScript.
    
* A React project set up. If you haven’t already, create one using [Create React App](https://reactjs.org/docs/create-a-new-react-app.html).
    

# **Getting Started**

In this tutorial, we’ll create a Category component that displays a list of categories with their images. We’ll start by defining the data for our categories and then build the component using React and Tailwind CSS.

Here’s the code for our `Category` component:

```plaintext
import React from "react";

const Category = () => {
  const categories = [
    {
      id: 1,
      name: "Fast Food",
      image:
        "https://duyt4h9nfnj50.cloudfront.net/new_search_home_eats_icon/FastFood_BrowseHome@3x.png",
    },
    {
      id: 2,
      name: "Pizza",
      image:
        "https://duyt4h9nfnj50.cloudfront.net/new_search_home_eats_icon/Pizza_BrowseHome@3x.png",
    },
    {
      id: 3,
      name: "Wings",
      image:
        "https://duyt4h9nfnj50.cloudfront.net/new_search_home_eats_icon/Wings_BrowseHome@3x.png",
    },
    {
      id: 4,
      name: "Indian",
      image:
        "https://duyt4h9nfnj50.cloudfront.net/new_search_home_eats_icon/Indian_BrowseHome@3x.png",
    },
    {
      id: 5,
      name: "Latest Deals",
      image:
        "https://duyt4h9nfnj50.cloudfront.net/new_search_home_eats_icon/Deals_BrowseHome@3x.png",
    },
    {
      id: 6,
      name: "Restaurant Rewards",
      image:
        "https://duyt4h9nfnj50.cloudfront.net/new_search_home_eats_icon/RestoRewards_BrowseHome@3x.png",
    },
  ];
  return (
    <div className="max-w-[1640px] m-auto px-4 py-12">
      <h1 className="text-orange-600 font-bold text-4xl text-center">
        Top Rated Menu Items
      </h1>
      {/* Categories */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-6 py-6">
        {categories.map((item, index) => (
          <div
            key={index}
            className="bg-gray-100 hover:bg-white cursor-pointer duration-500 rounded-lg p-4 flex justify-between items-center"
          >
            <h2 className="font-bold sm:text-xl">{item.name}</h2>
            <img src={item.image} alt={item.name} className="w-20" />
          </div>
        ))}
      </div>
    </div>
  );
};

export default Category;
```

In the `Category` component, we have defined an array of categories, each containing an `id`, `name`, and `image`. We then use the `map` function to loop through the categories and render them as cards with their names and images. The styling is done using Tailwind CSS classes, making it easy to achieve a clean and responsive design.

# **Integrating the Component**

Now that we have our `Category` component ready, let's integrate it into our main `App` component:

```plaintext
import React from "react";
import Category from "./components/Category";

function App() {
  return (
    <div>
      <Category />
    </div>
  );
}

export default App;
```

Here, we simply import the `Category` component and include it in our `App` component. When you run your React application, you should see the beautifully styled category cards displayed on your page.

# **Conclusion**

In this article, we’ve demonstrated how to create a stunning Category component using Tailwind CSS and React. This combination allows you to build visually appealing and responsive UI components with ease. Feel free to customize and expand upon this component to suit your project’s needs. Happy coding!