Explore Tailwind CSS team section examples to showcase your team members and roles. These blocks include a variety of layouts and styles to help you present your team in a clear and organized way.
"use client";
import { Button, Card, Text } from "@hummingbirdui/react";
type Social = "github" | "linkedin" | "twitter";
const members: {
name: string;
role: string;
bio: string;
image: string;
socials: Social[];
}[] = [
{
name: "Marcus Thorne",
role: "Frontend Developer",
bio: "Passionate about crafting beautiful UI and smooth UX.",
image:
"https://images.unsplash.com/photo-1566753323558-f4e0952af115?q=80&w=1021&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
socials: ["github", "linkedin"],
},
{
name: "Jane Smith",
role: "UI/UX Designer",
bio: "Designing intuitive and user-friendly experiences.",
image:
"https://images.unsplash.com/photo-1568602471122-7832951cc4c5?q=80&w=1170",
socials: ["twitter", "linkedin"],
},
{
name: "Michael Lee",
role: "Backend Engineer",
bio: "Building scalable and efficient server-side systems.",
image:
"https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
socials: ["github", "linkedin"],
},
{
name: "Emily Davis",
role: "Project Manager",
bio: "Ensuring projects are delivered on time and on point.",
image:
"https://images.unsplash.com/photo-1552058544-f2b08422138a?q=80&w=699&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
socials: ["twitter", "linkedin"],
},
{
name: "David Kim",
role: "Full Stack Developer",
bio: "Bridging frontend and backend with seamless integration.",
image:
"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
socials: ["github", "linkedin"],
},
{
name: "Sophia Brown",
role: "Product Designer",
bio: "Creating delightful product experiences with user focus.",
image:
"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=880&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
socials: ["twitter", "linkedin"],
},
{
name: "Daniel Wilson",
role: "DevOps Engineer",
bio: "Automating workflows and optimizing infrastructure.",
image:
"https://images.unsplash.com/photo-1546820389-44d77e1f3b31?q=80&w=764&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
socials: ["github", "linkedin"],
},
{
name: "Olivia Martinez",
role: "Marketing Lead",
bio: "Driving growth through creative marketing strategies.",
image:
"https://images.unsplash.com/photo-1563584316028-2b70b3a3a8bf?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
socials: ["twitter", "linkedin"],
},
];
const socialIcons: Record<Social, { label: string; path: string }> = {
github: {
label: "GitHub",
path: "M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2",
},
linkedin: {
label: "LinkedIn",
path: "M19.707 3H4.347a1.3 1.3 0 0 0-1.306 1.306v15.388c0 .696.58 1.306 1.306 1.306h15.3a1.3 1.3 0 0 0 1.307-1.306V4.277C21.013 3.581 20.432 3 19.707 3M8.354 18.3H5.713V9.735h2.642zM7.019 8.545a1.53 1.53 0 0 1-1.538-1.539c0-.841.696-1.538 1.538-1.538s1.54.697 1.54 1.538s-.64 1.54-1.54 1.54M18.371 18.3h-2.642v-4.152c0-.987-.029-2.293-1.393-2.293c-1.394 0-1.597 1.103-1.597 2.206V18.3h-2.642V9.735h2.584v1.19h.029c.377-.696 1.22-1.393 2.526-1.393c2.7 0 3.193 1.742 3.193 4.123V18.3z",
},
twitter: {
label: "X",
path: "m17.687 3.063l-4.996 5.711l-4.32-5.711H2.112l7.477 9.776l-7.086 8.099h3.034l5.469-6.25l4.78 6.25h6.102l-7.794-10.304l6.625-7.571zm-1.064 16.06L5.654 4.782h1.803l10.846 14.34z",
},
};
export default function Team1() {
return (
<section className="px-6 py-20 max-w-7xl mx-auto">
<div className="text-center mb-12">
<Text as="h1" size="3xl" className="sm:text-4xl mb-4">
Meet Our Team
</Text>
<Text className="text-muted sm:text-lg max-w-150 mx-auto">
Our team is a diverse group of passionate designers, developers, and
strategists dedicated to building exceptional digital experiences.
</Text>
</div>
<div className="grid gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 justify-items-center">
{members.map((member) => (
<Card
key={member.name}
className="text-center border-subtle max-w-80"
>
<Card.Image
src={member.image}
alt={member.name}
className="rounded-full w-32 h-32 object-cover mx-auto mt-6"
/>
<Card.Body>
<Text
as="h6"
size="lg"
fontWeight="semibold"
className="card-title mb-1"
>
{member.name}
</Text>
<Text size="sm" className="text-subtle mb-4">
{member.role}
</Text>
<Text size="sm" className="text-muted mb-0">
{member.bio}
</Text>
</Card.Body>
<Card.Footer className="flex justify-center gap-2 pb-4">
{member.socials.map((social) => (
<Button
key={social}
asChild
variant="icon"
color={null}
size="sm"
className="hover:text-muted transition"
>
<a href="#!" aria-label={socialIcons[social].label}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path fill="currentColor" d={socialIcons[social].path} />
</svg>
</a>
</Button>
))}
</Card.Footer>
</Card>
))}
</div>
</section>
);
}"use client";
import { Card, Text } from "@hummingbirdui/react";
const members = [
{
name: "Leslie Alexander",
role: "Co-Founder / CEO",
bio: "Expert in strategic planning and human-centric design with 10+ years of experience.",
image:
"https://images.unsplash.com/photo-1566753323558-f4e0952af115?q=80&w=1021&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
},
{
name: "Michael Foster",
role: "Co-Founder / CTO",
bio: "Architecting scalable solutions and leading our engineering team to new heights.",
image:
"https://images.unsplash.com/photo-1568602471122-7832951cc4c5?q=80&w=1170",
},
{
name: "Dries Vincent",
role: "Business Relations",
bio: "Building bridges between technology and user needs through global partnerships.",
image:
"https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
},
];
export default function Team2() {
return (
<section className="px-6 py-20 mx-auto max-w-7xl">
<div className="text-center mb-12">
<Text as="h1" size="3xl" className="sm:text-4xl mb-4">
Meet Our Leadership
</Text>
<Text className="text-muted sm:text-lg max-w-150 mx-auto">
We’re a dynamic group of individuals who are passionate about what we
do and dedicated to delivering the best results for our clients.
</Text>
</div>
<div className="mx-auto grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
{members.map((member) => (
<Card key={member.name} className="bg-default border-0">
<img
className="aspect-3/2 rounded-2xl object-cover mb-6"
src={member.image}
alt={member.name}
/>
<Text
as="h3"
size="lg"
fontWeight="semibold"
className="text-default mb-2"
>
{member.name}
</Text>
<Text size="base" fontWeight="medium" className="text-primary mb-4">
{member.role}
</Text>
<Text size="base" className="text-muted">
{member.bio}
</Text>
</Card>
))}
</div>
</section>
);
}"use client";
import { Text } from "@hummingbirdui/react";
const members = [
{
name: "Lindsay Walton",
role: "Front-end Developer",
image:
"https://images.unsplash.com/photo-1568602471122-7832951cc4c5?q=80&w=1170",
},
{
name: "Courtney Henry",
role: "Designer",
image:
"https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
},
{
name: "Tom Cook",
role: "Director of Product",
image:
"https://images.unsplash.com/photo-1546820389-44d77e1f3b31?q=80&w=764&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
},
{
name: "Leonard Krasner",
role: "Senior Designer",
image:
"https://images.unsplash.com/photo-1563584316028-2b70b3a3a8bf?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
},
];
export default function Team3() {
return (
<section className="px-6 py-20 mx-auto max-w-7xl">
<Text
as="h3"
size="base"
fontWeight="semibold"
className="text-primary mb-3"
>
Our people
</Text>
<Text as="h1" size="3xl" className="sm:text-4xl mb-4">
Built by a team of experts
</Text>
<Text className="text-muted sm:text-lg mb-12">
We believe that great software is built by diverse teams who are
passionate about their craft.
</Text>
<div className="grid grid-cols-2 gap-x-6 gap-y-12 sm:grid-cols-3 lg:grid-cols-4 lg:gap-x-8">
{members.map((member) => (
<div key={member.name}>
<img
className="aspect-square object-cover rounded-2xl mb-6"
src={member.image}
alt={member.name}
/>
<Text as="h3" size="base" fontWeight="semibold">
{member.name}
</Text>
<Text size="sm" className="text-muted">
{member.role}
</Text>
</div>
))}
</div>
</section>
);
}"use client";
import { Text } from "@hummingbirdui/react";
import { cn } from "@hummingbirdui/react/utils";
const members = [
{
name: "Arlo White",
role: "Backend Engineer",
bio: "Building robust systems with a focus on security and efficiency.",
image:
"https://images.unsplash.com/photo-1568602471122-7832951cc4c5?q=80&w=1170",
className:
"md:border-r md:pr-8 lg:pr-12 last:border-r-0 lg:nth-4:border-r-0",
},
{
name: "Sarah Jenkins",
role: "UX Designer",
bio: "Creating intuitive interfaces that put the user first.",
image:
"https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
className:
"md:pl-8 lg:border-r lg:px-8 lg:last:border-r-0 lg:nth-4:border-r-0",
},
{
name: "James Wilson",
role: "Product Manager",
bio: "Bridging the gap between technical teams and business goals.",
image:
"https://images.unsplash.com/photo-1546820389-44d77e1f3b31?q=80&w=764&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
className:
"md:border-r md:pr-8 lg:px-8 lg:last:border-r-0 lg:nth-4:border-r-0",
},
{
name: "Maya Patel",
role: "Frontend Lead",
bio: "Specializing in modern React architectures and animations.",
image:
"https://images.unsplash.com/photo-1563584316028-2b70b3a3a8bf?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
className: "md:pl-8 lg:pl-8",
},
];
export default function Team4() {
return (
<section className="px-6 py-20 mx-auto max-w-7xl">
<Text as="h1" size="3xl" className="sm:text-4xl mb-4">
Our Team
</Text>
<Text className="text-muted sm:text-lg max-w-2xl mb-12">
The talented people making it all happen.
</Text>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 border-t border-subtle">
{members.map((member) => (
<div
key={member.name}
className={cn("border-b border-subtle py-12", member.className)}
>
<img
className="size-16 object-cover rounded-full mb-6"
src={member.image}
alt={member.name}
/>
<Text as="h3" size="lg" fontWeight="semibold" className="mb-1">
{member.name}
</Text>
<Text size="sm" fontWeight="medium" className="text-primary mb-4">
{member.role}
</Text>
<Text size="sm" className="text-muted mb-0">
{member.bio}
</Text>
</div>
))}
</div>
</section>
);
}"use client";
import { Text } from "@hummingbirdui/react";
const members = [
{
name: "Jordan Smith",
role: "Creative Director",
image:
"https://images.unsplash.com/photo-1556157382-97eda2d62296?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
links: ["LinkedIn", "Twitter"],
},
{
name: "Anya Taylor",
role: "Lead Developer",
image:
"https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
links: ["Github", "LinkedIn"],
},
{
name: "David Vose",
role: "Product Manager",
image:
"https://images.unsplash.com/photo-1552058544-f2b08422138a?auto=format&fit=crop&q=80&w=600",
links: ["LinkedIn", "Twitter"],
},
];
export default function Team5() {
return (
<section className="px-6 py-20 mx-auto max-w-7xl">
<Text as="h1" size="3xl" className="sm:text-4xl mb-4">
Meet our specialists
</Text>
<Text className="text-muted sm:text-lg max-w-2xl mb-12">
Our team is composed of industry veterans and creative thinkers
dedicated to solving complex problems with elegant solutions.
</Text>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
{members.map((member) => (
<div
key={member.name}
className="group relative overflow-hidden aspect-4/5"
>
<img
src={member.image}
alt={member.name}
className="absolute size-full object-cover grayscale transition-transform duration-700 group-hover:scale-110 group-hover:grayscale-0"
/>
<div className="absolute bottom-0 p-8 size-full flex flex-col bg-linear-to-t from-black via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<Text
size="xs"
fontWeight="medium"
className="text-white mb-2 mt-auto"
>
{member.role}
</Text>
<Text as="h3" size="2xl" className="text-white mb-4">
{member.name}
</Text>
<div className="flex gap-4">
{member.links.map((link) => (
<a
key={link}
href="#"
className="text-white hover:text-primary text-sm"
>
{link}
</a>
))}
</div>
</div>
</div>
))}
</div>
</section>
);
}