Create Content Sections using React and Tailwind CSS

Creating well-structured content sections is crucial for any modern web application. In this article, we will walk through how to build content sections using React styled with Tailwind CSS and enhanced with React Icons.

We will create a React application with multiple content sections. Each section will include a title, description, and an icon from the React Icons library. Tailwind CSS will be used for styling to ensure a clean and responsive design.

Prerequisites

• React
• Tailwind CSS
• React Icons
• Node.js

Approach for Creating Content Sections

• Begin your project by creating a new React application with Create React App. This provides a boilerplate to work with and sets up the necessary file structure.
• Add Tailwind CSS to your project. This involves installing Tailwind. You’ll also initialize Tailwind’s configuration, which allows you to customize your styling.
• Modify your global CSS file to include Tailwind's base, components, and utilities. This step integrates Tailwind's styling into your application.
• Add the React Icons library to your project. This library provides a wide range of icons that you can easily use in your components.
• Design a reusable React component that represents a content section. This component should accept props for the title, description, and icon. Use Tailwind CSS classes to style the component, ensuring it has a clean and modern look.

Steps to Create Content Sections

Step 1: Set up the project using the command.

npx create-react-app react-app
cd react-app

Step 2: Install Tailwind CSS using the command.

npm install -D tailwindcss postcss autoprefixer 
npx tailwindcss init -p

Step 3: 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 4: Add tailwind directives to your index.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    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;
}

Project Structure:

Updated Dependencies:

"dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
}

Step 6: Install React Icons

Once the Project is created successfully Now install react icons by using the below commands in your project.

npm install react-icons

Example: In this example, we will create content sections using the react and tailwind CSS

// App.js

import React from 'react';
import { FaBeer, FaCoffee, FaApple, FaMusic, FaFilm, FaBook } from 'react-icons/fa';
import './index.css'; // Ensure Tailwind CSS is imported

const ContentSection = ({ title, description, icon }) => {
    return (
        <div className="flex items-center p-4 border-b 
        border-gray-200 hadow-lg transition-transform transform hover:scale-105">
            <div className="mr-4 text-green-500 text-2xl">
                {icon}
            </div>
            <div>
                <h2 className="text-xl font-semibold">{title}</h2>
                <p className="text-gray-700">{description}</p>
            </div>
        </div>
    );
};

const App = () => {
    return (
        <div className="max-w-4xl mx-auto mt-10 p-4">
            <ContentSection
                title="Enjoy a Beer"
                description="Relax with a refreshing beer."
                icon={<FaBeer />}
            />
            <ContentSection
                title="Have a Coffee"
                description="Start your day with a coffee."
                icon={<FaCoffee />}
            />
            <ContentSection
                title="Eat an Apple"
                description="An apple a day keeps the doctor away."
                icon={<FaApple />}
            />
            <ContentSection
                title="Listen to Music"
                description="Unwind with your favorite tunes."
                icon={<FaMusic />}
            />
            <ContentSection
                title="Watch a Movie"
                description="Enjoy a movie night with friends."
                icon={<FaFilm />}
            />
            <ContentSection
                title="Read a Book"
                description="Dive into a good book and relax."
                icon={<FaBook />}
            />
        </div>
    );
};

export default App;

To start the Application run the following command.

npm start

Output: