Create Contact Cards Component Using Next.js and Tailwind CSS
Last Updated :
03 Oct, 2024
The contact card component can display user information, such as a profile picture, contact details, and links to social media profiles. We will use Tailwind CSS for styling to ensure the card is visually appealing and responsive.
Output Preview: Let us have a look at how the final output will look like.
Project PreviewPrerequisites
Approach To Create Contact Cards Component:
- Create a functional component named ContactCard that will be responsible for rendering individual contact cards.
- Utilize Tailwind CSS classes to style the cards for a modern and responsive design. Styles such as setting dimensions for the cards, adding shadows and implementing hover effects.
- We will use icons from React Icons to represent email, phone and location for better visual appeal.
- Store contact details in an array of objects. Each object will represent adetails of each contact.
- Use the .map() method to loop through the array and render a ContactCard for each contact.
Steps to create the Project and Install required modules
Step 1: Create the NextJs App using the following command.
npx create-next-app@latest contact-card
cd contact-card
√ 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
Step 2: Install the React-icons
npm i react-icons
Project Structure
Project StructureUpdated dependencies
"dependencies": {
"next": "14.2.14",
"react": "^18",
"react-dom": "^18",
"react-icons": "^5.3.0"
},
"devDependencies": {
"postcss": "^8",
"tailwindcss": "^3.4.1"
}
Example: In this example we will write the following code in different files(The name of the files is mentioned in the first line of each code block).
JavaScript
/* 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;
}
}
// page.js
import ContactCard from './components/ContactCard';
const contacts = [
{
name: "Rahul Sharma",
role: "Software Engineer",
email: "[email protected]",
phone: "+91-9876598",
location: "Bangalore, KA",
linkedin: "#",
github: "#",
},
{
name: "priyanka Gupta",
role: "Product Manager",
email: "[email protected]",
phone: "+91-87654777",
location: "Mumbai, MH",
linkedin: "#",
github: "#",
},
{
name: "Aditi Verma",
role: "UI/UX Designer",
email: "[email protected]",
phone: "+91-98775677",
location: "Delhi, DL",
linkedin: "#",
github: "#",
},
];
export default function Home() {
return (
<div className="min-h-screen bg-gray-100 flex flex-wrap
justify-center items-center p-4">
{contacts.map((contact, index) => (
<ContactCard
key={index}
name={contact.name}
role={contact.role}
email={contact.email}
phone={contact.phone}
location={contact.location}
linkedin={contact.linkedin}
github={contact.github}
/>
))}
</div>
);
}
// components/ContactCard.js
import Image from 'next/image';
import { FiMail, FiPhone, FiMapPin } from 'react-icons/fi';
import { FaLinkedin, FaGithub } from 'react-icons/fa';
const ContactCard = ({ name, role, email, phone, location, linkedin, github })
=> {
return (
<div className="relative bg-white rounded-lg shadow-lg p-6 max-w-xs
sm:max-w-md mx-auto transform hover:scale-105 transition-transform
duration-300 ease-in-out">
<div className="flex flex-col items-center">
<div className="w-24 h-24 rounded-full overflow-hidden
border-4 border-white shadow-md mb-4">
<Image
className="object-cover"
src="https://media.geeksforgeeks.org/wp-content/
uploads/20210511160813/g4g.jpg"
alt={`${name}'s Profile Picture`}
width={96}
height={96}
/>
</div>
<h2 className="text-xl font-bold text-gray-800 mb-1">{name}</h2>
<p className="text-gray-500 mb-4">{role}</p>
</div>
<div className="text-gray-700">
<p className="flex items-center mb-2">
<FiMail className="w-5 h-5 text-blue-500 mr-2" /> {email}
</p>
<p className="flex items-center mb-2">
<FiPhone className="w-5 h-5 text-blue-500 mr-2" /> {phone}
</p>
<p className="flex items-center mb-2">
<FiMapPin className="w-5 h-5 text-blue-500 mr-2" /> {location}
</p>
</div>
<div className="flex justify-center space-x-4 mt-4">
<a href={linkedin} target="_blank" rel="noopener noreferrer">
<FaLinkedin className="w-6 h-6 text-blue-600
hover:text-blue-700" />
</a>
<a href={github} target="_blank" rel="noopener
noreferrer">
<FaGithub className="w-6 h-6 text-gray-700
hover:text-gray-900" />
</a>
</div>
</div>
);
};
export default ContactCard;
// next.config.mjs
export default {
images: {
domains: ['media.geeksforgeeks.org'], // Add this domain
},
};
Run your app by executing below command.
npm run dev
Output
Create Contact Cards Component Using Next.js