Create Team Sections using Next.JS and Tailwind CSS
Last Updated :
10 Oct, 2024
We'll learn how to create a beautiful and responsive "Team Section" on a website using Next.js and Tailwind CSS. The team section is a common part of many websites, especially for company portfolios, to display members, their roles, and social media links. Let's break down everything step-by-step to create this section efficiently.
Prerequisites
Approach
Set up a new Next.js project with the specific selection. Install and configure Tailwind CSS. Build a responsive Feeds UI with custom colors (primary: green, secondary: navy blue). Write all necessary components and styles.
Steps to Create & Set Up the Project
Step 1: Set up the Next.js project
Run the following command to create a new Next.js project:
npx create-next-app feeds-ui-nextjs
cd feeds-ui-nextjs
Step 2: Seelect the following options
[email protected]
Ok to proceed? (y) y
√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like to use `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to customize the default import alias (@/*)? ... No / Yes
Project Structure:
Project StrucrureUpdated Dependencies:
"dependencies": {
"react": "^18",
"react-dom": "^18",
"next": "14.2.15"
},Exampel: This example shows the creation of the Team section.
JavaScript
// components/TeamsSection.js
export default function TeamsSection() {
return (
<section className="bg-green-300 min-h-screen flex
flex-col items-center justify-center">
<h2 className="text-3xl font-bold text-center text-navy-900 mb-8">
Meet Our Engineers
</h2>
<div className="container mx-auto px-4">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{/* Engineer 1 */}
<div className="bg-white rounded-lg shadow-lg p-6 text-center">
<img
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20241010131140213419/000000.png"
// Replace with your image URL
alt="Mia Johnson"
className="w-24 h-24 rounded-full mx-auto" />
<h3 className="text-xl font-semibold mt-4">Mia Johnson</h3>
<p className="text-gray-600">Software Engineer</p>
<p className="mt-2 text-gray-500">
Mia specializes in full-stack development, creating seamless user
experiences while ensuring robust back-end functionality.
</p>
<div className="mt-4 flex justify-center space-x-4">
<a href="#" className="text-green-700 hover:text-green-500">
<i className="fab fa-linkedin"></i>
</a>
<a href="#" className="text-green-700 hover:text-green-500">
<i className="fab fa-github"></i>
</a>
</div>
</div>
{/* Engineer 2 */}
<div className="bg-white rounded-lg shadow-lg p-6 text-center">
<img
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20241010131140213419/000000.png"
// Replace with your image URL
alt="Lucas Brown"
className="w-24 h-24 rounded-full mx-auto"
/>
<h3 className="text-xl font-semibold mt-4">Lucas Brown</h3>
<p className="text-gray-600">DevOps Engineer</p>
<p className="mt-2 text-gray-500">
Lucas excels in automating and optimizing development processes,
ensuring continuous integration and delivery for smooth
operations.
</p>
<div className="mt-4 flex justify-center space-x-4">
<a href="#" className="text-green-700 hover:text-green-500">
<i className="fab fa-linkedin"></i>
</a>
<a href="#" className="text-green-700 hover:text-green-500">
<i className="fab fa-github"></i>
</a>
</div>
</div>
{/* Engineer 3 */}
<div className="bg-white rounded-lg shadow-lg p-6 text-center">
<img
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20241010131140213419/000000.png"
alt="Sophia Lee"
className="w-24 h-24 rounded-full mx-auto" />
<h3 className="text-xl font-semibold mt-4">Sophia Lee</h3>
<p className="text-gray-600">Data Engineer</p>
<p className="mt-2 text-gray-500">
Sophia focuses on building data pipelines and ensuring data
integrity, making sure that our data-driven decisions are based on
accurate information.
</p>
<div className="mt-4 flex justify-center space-x-4">
<a href="#" className="text-green-700 hover:text-green-500">
<i className="fab fa-linkedin"></i>
</a>
<a href="#" className="text-green-700 hover:text-green-500">
<i className="fab fa-github"></i>
</a>
</div>
</div>
</div>
</div>
</section>
);
}
// src/app/page.js
import TeamsSection from './components/TeamsSection';
export default function Home() {
return (
<div>
<TeamsSection />
</div>
);
}
Now, type the below command to run the application.
npm run dev
Output: To see output, open localhost:3000 in your system.
Output