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.

Prerequisites

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

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

JavaScript

// 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>
    );
}

JavaScript

// 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;

JavaScript

// 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

Create Logo Clouds using Next.JS and Tailwind CSS

yuvrajghule281

Improve

Article Tags :

Create Contact Cards Component Using Next.js and Tailwind CSS

Prerequisites

Approach To Create Contact Cards Component:

Steps to create the Project and Install required modules

Step 1: Create the NextJs App using the following command.

Step 2: Install the React-icons

Project Structure

Updated dependencies

Similar Reads

Thank You!

What kind of Experience do you want to share?