Create Team Sections Using React and Tailwind CSS

Last Updated : 20 Sep, 2024

In this article, we will create a Team Section using React and Tailwind CSS. The team section will display team member information including their name role, and profile picture with a responsive and modern layout. Tailwind CSS simplifies styling by using utility first classes making the development process faster and more efficient.

Prerequisites

Steps To Create Team Sections Using React

Here we will create a sample ReactJS project then we will install Tailwind CSS once it is completed we will start development for Team Sections using React and Tailwind CSS. Below are the steps to create and configure the project:

Step 1: Set up a React Application

First, create a sample React JS application by using the mentioned command then navigate to the project folder

npx create-react-app react-app
cd team-section

Project Folder

Screenshot-2024-09-12-114329 — Project Folder

Updated Dependencies

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^5.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

Step 2 : Install and Configure Tailwind CSS

Once Project is created successfully Now install and configure the Tailwind css by using below commands in your project.

cd react-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Step 3 : Develop Business logic

Once Tailwind css installation and configuration is completed. Now we need develop user interface for team section using tailwind css and html. And it is responsive web page for this we use App.js and App.css files we provide that source code for your reference.

App.js ( src\App.js )
App.css ( src\index.css )
index.css ( src\index.js )
tailwind.config.js ( tailwind.config.js )

Example: This example demonstrates the creation of Team Sections Using React and Tailwind CSS:

CSS

/*App.css*/

.member {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

CSS

/*index.css*/

@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;
}

JavaScript

//App.js

import './App.css';

function App() {
    const teamMembers = [
        {
            name: "John Doe",
            role: "Frontend Developer",
            imageUrl: "https://via.placeholder.com/150",
        },
        {
            name: "Jane Smith",
            role: "Backend Developer",
            imageUrl: "https://via.placeholder.com/150",
        },
        {
            name: "Sam Wilson",
            role: "UI/UX Designer",
            imageUrl: "https://via.placeholder.com/150",
        },
        {
            name: "Merry",
            role: "DevOps Engineer",
            imageUrl: "https://via.placeholder.com/150",
        },
        {
            name: "Johny",
            role: "Product Manager",
            imageUrl: "https://via.placeholder.com/150",
        },
    ];

    return (
        <div className="App">
            <div className="bg-green-600
                            py-8 h-screen">
                <h2 className="text-3xl font-semibold
                               text-center mb-6 text-white">
                    Our Team
                </h2>
                <div className="flex flex-wrap 
                                justify-center gap-6">
                    {teamMembers.map((member, index) => (
                        <div
                            key={index}
                            className="member bg-white 
                                       shadow-md rounded-lg p-4 w-60
                                       h-80 flex flex-col items-center
                                       justify-center transition-transform
                                       duration-300 transform hover:scale-105
                                       hover:shadow-xl"
                        >
                            <img
                                src={member.imageUrl}
                                alt={member.name}
                                className="w-24 h-24 rounded-full mb-4"
                            />
                            <h3 className="text-xl 
                                           font-medium">{member.name}</h3>
                            <p className="text-gray-600">{member.role}</p>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
}

export default App;

JavaScript

/*tailwind.config.js*/

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./src/**/*.{js,jsx,ts,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

Step 4 : Run the Application

Once Development is completed Now we need run the react js application by using below command. By default the react js application run on port number 3000.

npm start

Output: Once Project is successfully running then open the below URL to test the output.

http://localhost:3000/

Spring Boot Tutorial

myarticcdb5

Improve

Article Tags :