Create Category Previews Using React And Tailwind CSS
Last Updated : 25 Sep, 2024
In modern web development creating visually appealing and functional components is essential for enhancing user experience. The goal is to showcase categories with distinct icons and a stylish green background using Tailwinds utility classes for a streamlined and responsive design.
This article focuses on building a Category Preview component using React and Tailwind CSS.
Prerequisites
Approach for Creating Category Previews
- The component will consist of a flex container that holds individual category items. Each item will include an icon, a title, and be styled with Tailwind CSS for a clean and modern look.
- Tailwind's utility classes handle layout, spacing, colours, and responsiveness. This allows for rapid styling without the need for custom CSS.
- Use React Icons to provide a variety of category icons, enhancing visual representation and making the UI more intuitive. This adds an engaging element to the component, helping users quickly identify categories.
- Structure the categories as an array of objects, making it easy to map over them and render category items dynamically. This approach enhances maintainability and scalability, allowing for easy updates or additions to the category list.
Step 1: Set up a React Application
npx create-react-app react-app
Step 2: Install node modules using the command
npm install
cd react-app
Step 3: Install Tailwind CSS using the command
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Step 4: Configure the tailwind paths in your tailwind.config.js file
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}Step 5: Add tailwind directives to your index.css file
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
overflow: hidden;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
Folder Structure
project folderUpdated Dependencies
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
}Step 6: Install React Icons
npm install react-icons
Example: Below is a code example of creating category previews using the react and tailwind CSS
JavaScript // App.js import React, { useState } from "react"; import { FaBox, FaTag, FaUsers } from "react-icons/fa"; // Importing React Icons import "./App.css"; // Tailwind CSS import // Sample category data with images and descriptions const categories = [ { name: "Products", icon: <FaBox size={24} />, bgColor: "bg-green-500", image: "https://via.placeholder.com/150", description: "Explore a wide range of products available for you.", }, { name: "Deals", icon: <FaTag size={24} />, bgColor: "bg-green-600", image: "https://via.placeholder.com/150", description: "Discover exciting deals and offers!", }, { name: "Community", icon: <FaUsers size={24} />, bgColor: "bg-green-700", image: "https://via.placeholder.com/150", description: "Join our community and connect with others.", }, { name: "New Arrivals", icon: <FaBox size={24} />, bgColor: "bg-blue-500", image: "https://via.placeholder.com/150", description: "Check out the latest arrivals in our store.", }, { name: "Best Sellers", icon: <FaTag size={24} />, bgColor: "bg-red-500", image: "https://via.placeholder.com/150", description: "Explore our best-selling products.", }, { name: "Trending", icon: <FaUsers size={24} />, bgColor: "bg-purple-500", image: "https://via.placeholder.com/150", description: "See what's trending in the market.", }, ]; const CategoryPreview = () => { const [selectedCategory, setSelectedCategory] = useState(null); const handleCategoryClick = (category) => { setSelectedCategory(category); }; const closeModal = () => { setSelectedCategory(null); }; return ( <div> <p className="text-center font-bold text-green-600 text-[45px] p-5 mb-2"> Category Previews </p> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-2 w-11/12 m-auto"> {categories.map((category, index) => ( <div key={index} className={`flex flex-col items-center justify-center w-full h-[250px] ${category.bgColor} text-white rounded-lg shadow-lg transition-transform duration-300 hover:scale-105 cursor-pointer`} onClick={() => handleCategoryClick(category)} aria-label={category.name} > <div className="text-4xl">{category.icon}</div> <img src={category.image} alt={category.name} className="w-24 h-24 object-cover rounded-full mt-2" /> <span className="ml-2 text-xl">{category.name}</span> </div> ))} </div> {/* Modal for detailed category view */} {selectedCategory && ( <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50"> <div className="bg-white p-5 rounded-lg shadow-lg w-11/12 max-w-lg"> <h2 className="text-xl font-bold mb-2">{selectedCategory.name} </h2> <img src={selectedCategory.image} alt={selectedCategory.name} className="w-full h-48 object-cover rounded-lg mb-4" /> <p className="text-gray-700">{selectedCategory.description}</p> <button onClick={closeModal} className="mt-4 bg-red-500 text-white py-2 px-4 rounded" > Close </button> </div> </div> )} </div> ); }; function App() { return ( <div className="App"> <CategoryPreview /> </div> ); } export default App;
To start the Application run the following command.
npm start
Output:
Once the Project is successfully running then open the below URL to test the output.
http://localhost:3000/