Create Feature Section Using Next.JS and Tailwind CSS

Last Updated : 25 Oct, 2024

A feature section is a key part of a modern website that highlights the essential products or services a company offers. It's an interactive section that grabs the user's attention and communicates the core values or features of the brand or platform. In this tutorial, we'll walk through the process of creating a responsive Feature Section using Next.js and Tailwind CSS.

Prerequisites

Approach to Creating a Feature Section

Initialize a new Next.js project using create-next-app.
Create a FeatureSection.js component inside the components folder.
In this component add the icons for each feature.
Include a title and description for each feature.
Apply hover effects using Tailwind utilities to improve the interactivity and aesthetics of the section.
Use Tailwind CSS to create a grid layout that will adjust according to the screen size, ensuring the section is responsive.

Steps To Build Feature section

Step 1: Set up the project using the command.

npx create-next-app@latest feature-section

Configuration which you should follow while creating the App:

Next-project-installation — Setup Next.js project

Step 2: Move to the project folder from the Terminal

cd feature-section

Step 3: Install the required dependencies

npm install react-icons

Project Structure

Dependencies

"dependencies": {
    "next": "14.2.13",
    "react": "^18",
    "react-dom": "^18",
    "react-icons": "^5.3.0"
  },
"devDependencies": {
    "postcss": "^8",
    "tailwindcss": "^3.4.1"
  }

Step 4: Write the following code in different files.

CSS

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --background: #ffffff;
    --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #0a0a0a;
        --foreground: #ededed;
    }
}

body {
    color: var(--foreground);
    background: var(--background);
    font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
    .text-balance {
        text-wrap: balance;
    }
}

JavaScript

// page.js

import FeatureSection from '../components/FeatureSection';

export default function Home() {
    return (
        <div>
            <h1 className="text-center text-3xl 
            font-bold mt-12"></h1>
            <FeatureSection />
        </div>
    );
}

JavaScript

// components/FeatureSection.js

import { FaCheckCircle, FaRocket, FaShieldAlt } from "react-icons/fa";

const features = [
    {
        icon: <FaCheckCircle 
        className="text-4xl text-blue-600" />,
        title: "High Quality",
        description:
            "We ensure the highest quality in all of our products and services.",
    },
    {
        icon: <FaRocket 
        className="text-4xl text-green-600" />,
        title: "Fast Delivery",
        description:
            "Speed is at the heart of everything we do, ensuring fast delivery.",
    },
    {
        icon: <FaShieldAlt 
        className="text-4xl text-red-600" />,
        title: "Secure",
        description: "Our platform offers the most secure experience possible.",
    },
];

const FeatureSection = () => {
    return (
        <section className="py-12 bg-gray-50">
            <div className="max-w-6xl mx-auto text-center">
                <h2 className="text-3xl font-bold mb-6">Our Features</h2>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                    {features.map((feature, index) => (
                        <div
                            key={index}
                            className="bg-white p-6 rounded-lg shadow-md
                                 hover:shadow-lg transition-shadow duration-300"
                        >
                            <div className="mb-4">{feature.icon}</div>
                            <h3 className="text-xl font-semibold mb-2">
                                {feature.title}</h3>
                            <p className="text-gray-600">{feature.description}</p>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
};

export default FeatureSection;

Run your app by executing the below command:

npm run dev

Output:

feature-section-next — Create Feature Section Using Next.JS and Tailwind CSS

5 Essential NodeJS Libraries for Projects

yuvrajghule281

Improve

Article Tags :