Team Section

Introduction

Ready for your first design challenge?

Let’s go!

The brief

In this challenge, you’ll create a card component for a team member. This card will include:

• A circular image at the top (use placeholders if needed).
• A title and a short description.
• Buttons for their Twitter/X and LinkedIn profiles.

1. Team member card component

Challenge

Create a card component for a team member that includes:

• A circular image at the top (use placeholders if needed).
• A title and a short description.
• Buttons for their Twitter/X and LinkedIn profiles.

Tailwind Focus: image positioning, object cover, padding, margins, border radius, background colour

Remember

The actual pictures of people shown here will be different to yours. You just need to work out how to include and style it with Tailwind.

1. First, build out a single ‘card’ in raw HTML/JSX and Tailwind.

   Look carefully at how the divs are nested and the classes are applied:

   import headshot from "./assets/headshot.webp";
   import { RiTwitterXFill, RiLinkedinBoxFill } from "react-icons/ri";
   
   <div className="rounded-lg bg-slate-800 p-8 w-fit">
     <img
       src={headshot}
       alt="An employee"
       className="w-64 h-64 rounded-full mx-auto"
     />
   
     <div className="pt-6">
       <h3 className="text-center font-semi-bold text-white">
         Leonard Krasner
       </h3>
       <p className="text-slate-400 text-center pt-1">Senior Designer</p>
   
       <div className="flex justify-center gap-4 text-slate-400 pt-6">
         <RiTwitterXFill />
         <RiLinkedinBoxFill />
       </div>
     </div>
   </div>

Click to reveal

2. Extract the card into a reusable component

Next, we need to extract this raw code and wrap it into a resuable component.

Challenge

Look carefully at your code, and work out what parts are specific to this team member, and what parts are generic.

Remind yourself how to create a reusable component in React on this page.

Try to develop your own solution before checking the answer below.

2. Next, extract this raw code and wrap it into a resuable component. Look carefully at where we have replaced the hardcoded values with props:

   import { RiTwitterXFill, RiLinkedinBoxFill } from "react-icons/ri";
   
   interface TeamMemberCardProps {
     name: string;
     role: string;
     imageSrc: string;
   }
   
   export default function TeamMemberCard({
     name,
     role,
     imageSrc,
   }: TeamMemberCardProps) {
     return (
       <div className="rounded-lg bg-slate-800 p-8 w-fit">
         <img
           src={imgSrc}
           alt="An employee"
           className="w-64 h-64 rounded-full mx-auto"
         />
   
         <div className="pt-6">
           <h3 className="text-center font-semi-bold text-white">{name}</h3>
           <p className="text-slate-400 text-center pt-1">{role}</p>
   
           <div className="flex justify-center gap-4 text-slate-400 pt-6">
             <RiTwitterXFill />
             <RiLinkedinBoxFill />
           </div>
         </div>
       </div>
     );
   };

Click to reveal

2. Use your card component to create the ‘Meet our team’ section below:

1. Create a new parent div that wraps the entire section, and call your TeamMemberCard component with different props for each team member:

   <section>
     <h2 className="text-4xl font-bold text-center">Meet our Team</h2>
   
     <p className="text-slate-400 text-center py-8">
       We're a dynamic group of individuals who are passionate about what we
       do
     </p>
   
     <div className="flex gap-8 justify-center">
       <TeamMemberCard
         imgSrc={headshot}
         name="Leonard Krassler"
         role="Lead Developer"
       />
       <TeamMemberCard
         imgSrc={headshot2}
         name="Emily Salmon"
         role="VP, User Experience"
       />
       <TeamMemberCard
         imgSrc={headshot3}
         name="Alex Sanders"
         role="Senior Designer"
       />
     </div>
   </section>

Click to reveal