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.
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:
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:
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!
Top comments (0)