Team Section

Grid of team member profiles.

html

<section class="team">
  <h2 class="team__heading">Meet the team</h2>
  <div class="team__grid team__grid--3">
    <div class="team__card"><span class="team__avatar" style="background:#F5C2E0;">MK</span><p class="team__name">Maya Kessler</p><p class="team__role">Co-founder</p></div>
    <div class="team__card"><span class="team__avatar" style="background:#F5C2E0;">DP</span><p class="team__name">Diego Pardo</p><p class="team__role">Head of Design</p></div>
    <div class="team__card"><span class="team__avatar" style="background:#F5C2E0;">RJ</span><p class="team__name">Rhea Joshi</p><p class="team__role">Engineering</p></div>
    <div class="team__card"><span class="team__avatar" style="background:#F5C2E0;">TL</span><p class="team__name">Theo Lang</p><p class="team__role">Customer Success</p></div>
  </div>
</section>
<style>
.team { font: 15px system-ui, sans-serif; color: #241430; padding: 24px; }
.team__heading { margin: 0 0 18px; font-size: 22px; font-weight: 700; }
.team__grid { display: grid; gap: 20px; }
.team__grid--2 { grid-template-columns: repeat(2, 1fr); }
.team__grid--3 { grid-template-columns: repeat(3, 1fr); }
.team__grid--4 { grid-template-columns: repeat(4, 1fr); }
.team__grid--2 .team__card:nth-child(n+3), .team__grid--3 .team__card:nth-child(n+4) { display: none; }
.team__card { text-align: center; }
.team__avatar { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; font-weight: 700; margin-bottom: 10px; color: #241430; }
.team__name { margin: 0; font-weight: 700; font-size: 14px; }
.team__role { margin: 2px 0 0; font-size: 12px; color: #241430aa; }
</style>

tailwind

<section class="font-sans text-[#241430] p-6">
  <h2 class="m-0 mb-4.5 text-2xl font-bold">Meet the team</h2>
  <div class="team-tw team-tw--3 grid gap-5">
    <div class="team-tw__card text-center"><span class="inline-flex items-center justify-center w-16 h-16 rounded-full font-bold mb-2.5 text-[#241430]" style="background:#F5C2E0;">MK</span><p class="m-0 font-bold text-sm">Maya Kessler</p><p class="mt-0.5 mb-0 text-xs text-[#241430]/65">Co-founder</p></div>
    <div class="team-tw__card text-center"><span class="inline-flex items-center justify-center w-16 h-16 rounded-full font-bold mb-2.5 text-[#241430]" style="background:#F5C2E0;">DP</span><p class="m-0 font-bold text-sm">Diego Pardo</p><p class="mt-0.5 mb-0 text-xs text-[#241430]/65">Head of Design</p></div>
    <div class="team-tw__card text-center"><span class="inline-flex items-center justify-center w-16 h-16 rounded-full font-bold mb-2.5 text-[#241430]" style="background:#F5C2E0;">RJ</span><p class="m-0 font-bold text-sm">Rhea Joshi</p><p class="mt-0.5 mb-0 text-xs text-[#241430]/65">Engineering</p></div>
    <div class="team-tw__card text-center"><span class="inline-flex items-center justify-center w-16 h-16 rounded-full font-bold mb-2.5 text-[#241430]" style="background:#F5C2E0;">TL</span><p class="m-0 font-bold text-sm">Theo Lang</p><p class="mt-0.5 mb-0 text-xs text-[#241430]/65">Customer Success</p></div>
  </div>
</section>
<style>
.team-tw--2 { grid-template-columns: repeat(2, 1fr); }
.team-tw--3 { grid-template-columns: repeat(3, 1fr); }
.team-tw--4 { grid-template-columns: repeat(4, 1fr); }
.team-tw--2 .team-tw__card:nth-child(n+3), .team-tw--3 .team-tw__card:nth-child(n+4) { display: none; }
</style>

react

export function TeamSection({
  heading = "Meet the team",
  columns = "3",
  accent = "#F5C2E0",
  showRole = true,
}) {
  const members = [
    { initials: "MK", name: "Maya Kessler", role: "Co-founder" },
    { initials: "DP", name: "Diego Pardo", role: "Head of Design" },
    { initials: "RJ", name: "Rhea Joshi", role: "Engineering" },
    { initials: "TL", name: "Theo Lang", role: "Customer Success" },
  ].slice(0, Number(columns));
  return (
    <section style={{ font: "15px system-ui, sans-serif", color: "#241430", padding: 24 }}>
      <h2 style={{ margin: "0 0 18px", fontSize: 22, fontWeight: 700 }}>{heading}</h2>
      <div style={{ display: "grid", gap: 20, gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
        {members.map((m) => (
          <div key={m.initials} style={{ textAlign: "center" }}>
            <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 64, height: 64,
              borderRadius: "50%", fontWeight: 700, marginBottom: 10, color: "#241430", background: accent }}>{m.initials}</span>
            <p style={{ margin: 0, fontWeight: 700, fontSize: 14 }}>{m.name}</p>
            {showRole && <p style={{ margin: "2px 0 0", fontSize: 12, color: "#241430aa" }}>{m.role}</p>}
          </div>
        ))}
      </div>
    </section>
  );
}