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.
<section class="px-6 py-20 max-w-7xl mx-auto">
<div class="text-center mb-12">
<h1 class="text-3xl sm:text-4xl mb-4">Meet Our Team</h1>
<p class="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.</p>
</div>
<div class="grid gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 justify-items-center">
<div class="card text-center border-subtle max-w-80">
<img src="https://images.unsplash.com/photo-1566753323558-f4e0952af115?q=80&w=1021&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Marcus Thorne" class="card-img-top rounded-full w-32 h-32 object-cover mx-auto mt-6" />
<div class="card-body">
<h6 class="card-title text-lg font-semibold mb-1">Marcus Thorne</h6>
<p class="text-sm text-subtle mb-4">Frontend Developer</p>
<p class="text-sm text-muted mb-0">Passionate about crafting beautiful UI and smooth UX.</p>
</div>
<div class="card-footer flex justify-center gap-2 pb-4">
<a href="#!" class="btn btn-icon btn-sm hover:text-muted transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="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"></path></svg>
</a>
<a href="#!" class="btn btn-icon btn-sm hover:text-muted transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="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"></path></svg>
</a>
</div>
</div>
<div class="card text-center border-subtle max-w-80">
<img src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?q=80&w=1170" alt="Jane Smith" class="card-img-top rounded-full w-32 h-32 object-cover mx-auto mt-6" />
<div class="card-body">
<h6 class="card-title text-lg font-semibold mb-1">Jane Smith</h6>
<p class="text-sm text-subtle mb-4">UI/UX Designer</p>
<p class="text-sm text-muted mb-0">Designing intuitive and user-friendly experiences.</p>
</div>
<div class="card-footer flex justify-center gap-2 pb-4">
<a href="#!" class="btn btn-icon btn-sm hover:text-muted transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="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"></path></svg>
</a>
<a href="#!" class="btn btn-icon btn-sm hover:text-muted transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="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"></path></svg>
</a>
</div>
</div>
<div class="card text-center border-subtle max-w-80">
<img src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Michael Lee" class="card-img-top rounded-full w-32 h-32 object-cover mx-auto mt-6" />
<div class="card-body">
<h6 class="card-title text-lg font-semibold mb-1">Michael Lee</h6>
<p class="text-sm text-subtle mb-4">Backend Engineer</p>
<p class="text-sm text-muted mb-0">Building scalable and efficient server-side systems.</p>
</div>
<div class="card-footer flex justify-center gap-2 pb-4">
<a href="#!" class="btn btn-icon btn-sm hover:text-muted transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="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"></path></svg>
</a>
<a href="#!" class="btn btn-icon btn-sm hover:text-muted transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="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"></path></svg>
</a>
</div>
</div>
<div class="card text-center border-subtle max-w-80">
<img src="https://images.unsplash.com/photo-1552058544-f2b08422138a?q=80&w=699&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Emily Davis" class="card-img-top rounded-full w-32 h-32 object-cover mx-auto mt-6" />
<div class="card-body">
<h6 class="card-title text-lg font-semibold mb-1">Emily Davis</h6>
<p class="text-sm text-subtle mb-4">Project Manager</p>
<p class="text-sm text-muted mb-0">Ensuring projects are delivered on time and on point.</p>
</div>
<div class="card-footer flex justify-center gap-2 pb-4">
<a href="#!" class="btn btn-icon btn-sm hover:text-muted transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="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"></path></svg>
</a>
<a href="#!" class="btn btn-icon btn-sm hover:text-muted transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="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"></path></svg>
</a>
</div>
</div>
<div class="card text-center border-subtle max-w-80">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="David Kim" class="card-img-top rounded-full w-32 h-32 object-cover mx-auto mt-6" />
<div class="card-body">
<h6 class="card-title text-lg font-semibold mb-1">David Kim</h6>
<p class="text-sm text-subtle mb-4">Full Stack Developer</p>
<p class="text-sm text-muted mb-0">Bridging frontend and backend with seamless integration.</p>
</div>
<div class="card-footer flex justify-center gap-2 pb-4">
<a href="#!" class="btn btn-icon btn-sm hover:text-muted transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="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"></path></svg>
</a>
<a href="#!" class="btn btn-icon btn-sm hover:text-muted transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="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"></path></svg>
</a>
</div>
</div>
<div class="card text-center border-subtle max-w-80">
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=880&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Sophia Brown" class="card-img-top rounded-full w-32 h-32 object-cover mx-auto mt-6" />
<div class="card-body">
<h6 class="card-title text-lg font-semibold mb-1">Sophia Brown</h6>
<p class="text-sm text-subtle mb-4">Product Designer</p>
<p class="text-sm text-muted mb-0">Creating delightful product experiences with user focus.</p>
</div>
<div class="card-footer flex justify-center gap-2 pb-4">
<a href="#!" class="btn btn-icon btn-sm hover:text-muted transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="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"></path></svg>
</a>
<a href="#!" class="btn btn-icon btn-sm hover:text-muted transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="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"></path></svg>
</a>
</div>
</div>
<div class="card text-center border-subtle max-w-80">
<img src="https://images.unsplash.com/photo-1546820389-44d77e1f3b31?q=80&w=764&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Daniel Wilson" class="card-img-top rounded-full w-32 h-32 object-cover mx-auto mt-6" />
<div class="card-body">
<h6 class="card-title text-lg font-semibold mb-1">Daniel Wilson</h6>
<p class="text-sm text-subtle mb-4">DevOps Engineer</p>
<p class="text-sm text-muted mb-0">Automating workflows and optimizing infrastructure.</p>
</div>
<div class="card-footer flex justify-center gap-2 pb-4">
<a href="#!" class="btn btn-icon btn-sm hover:text-muted transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="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"></path></svg>
</a>
<a href="#!" class="btn btn-icon btn-sm hover:text-muted transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="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"></path></svg>
</a>
</div>
</div>
<div class="card text-center border-subtle max-w-80">
<img src="https://images.unsplash.com/photo-1563584316028-2b70b3a3a8bf?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Olivia Martinez" class="card-img-top rounded-full w-32 h-32 object-cover mx-auto mt-6" />
<div class="card-body">
<h6 class="card-title text-lg font-semibold mb-1">Olivia Martinez</h6>
<p class="text-sm text-subtle mb-4">Marketing Lead</p>
<p class="text-sm text-muted mb-0">Driving growth through creative marketing strategies.</p>
</div>
<div class="card-footer flex justify-center gap-2 pb-4">
<a href="#!" class="btn btn-icon btn-sm hover:text-muted transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="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"></path></svg>
</a>
<a href="#!" class="btn btn-icon btn-sm hover:text-muted transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="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"></path></svg>
</a>
</div>
</div>
</div>
</section>
<section class="px-6 py-20 mx-auto max-w-7xl">
<div class="text-center mb-12">
<h1 class="text-3xl sm:text-4xl mb-4">Meet Our Leadership</h1>
<p class="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.</p>
</div>
<div class="mx-auto grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
<div class="card bg-default border-0">
<img class="aspect-3/2 rounded-2xl object-cover mb-6" src="https://images.unsplash.com/photo-1566753323558-f4e0952af115?q=80&w=1021&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Leslie Alexander" />
<h3 class="text-lg font-semibold text-default mb-2">Leslie Alexander</h3>
<p class="text-base text-primary font-medium mb-4">Co-Founder / CEO</p>
<p class="text-base text-muted">Expert in strategic planning and human-centric design with 10+ years of experience.</p>
</div>
<div class="card bg-default border-0">
<img class="aspect-3/2 rounded-2xl object-cover mb-6" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?q=80&w=1170" alt="Leslie Alexander" />
<h3 class="text-lg font-semibold text-default mb-2">Michael Foster</h3>
<p class="text-base text-primary font-medium mb-4">Co-Founder / CTO</p>
<p class="text-base text-muted">Architecting scalable solutions and leading our engineering team to new heights.</p>
</div>
<div class="card bg-default border-0">
<img class="aspect-3/2 rounded-2xl object-cover mb-6" src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Leslie Alexander" />
<h3 class="text-lg font-semibold text-default mb-2">Dries Vincent</h3>
<p class="text-base text-primary font-medium mb-4">Business Relations</p>
<p class="text-base text-muted">Building bridges between technology and user needs through global partnerships.</p>
</div>
</div>
</section>
<section class="px-6 py-20 mx-auto max-w-7xl">
<h3 class="text-base font-semibold text-primary mb-3">Our people</h3>
<h1 class="text-3xl sm:text-4xl mb-4">Built by a team of experts</h1>
<p class="text-muted sm:text-lg mb-12">We believe that great software is built by diverse teams who are passionate about their craft.</p>
<div class="grid grid-cols-2 gap-x-6 gap-y-12 sm:grid-cols-3 lg:grid-cols-4 lg:gap-x-8">
<div>
<img class="aspect-square object-cover rounded-2xl mb-6" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?q=80&w=1170" alt="Lindsay Walton" />
<h3 class="text-base font-semibold">Lindsay Walton</h3>
<p class="text-sm text-muted">Front-end Developer</p>
</div>
<div>
<img class="aspect-square object-cover rounded-2xl mb-6" src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Lindsay Walton" />
<h3 class="text-base font-semibold">Courtney Henry</h3>
<p class="text-sm text-muted">Designer</p>
</div>
<div>
<img class="aspect-square object-cover rounded-2xl mb-6" src="https://images.unsplash.com/photo-1546820389-44d77e1f3b31?q=80&w=764&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Lindsay Walton" />
<h3 class="text-base font-semibold">Tom Cook</h3>
<p class="text-sm text-muted">Director of Product</p>
</div>
<div>
<img class="aspect-square object-cover rounded-2xl mb-6" src="https://images.unsplash.com/photo-1563584316028-2b70b3a3a8bf?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Lindsay Walton" />
<h3 class="text-base font-semibold">Leonard Krasner</h3>
<p class="text-sm text-muted">Senior Designer</p>
</div>
</div>
</section>
<section class="px-6 py-20 mx-auto max-w-7xl">
<h1 class="text-3xl sm:text-4xl mb-4">Our Team</h1>
<p class="text-muted sm:text-lg max-w-2xl mb-12">The talented people making it all happen.</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 border-t border-subtle">
<div class="border-b border-subtle py-12 md:border-r md:pr-8 lg:pr-12 last:border-r-0 lg:nth-4:border-r-0">
<img class="size-16 object-cover rounded-full mb-6" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?q=80&w=1170" alt="Arlo White" />
<h3 class="text-lg font-semibold mb-1">Arlo White</h3>
<p class="text-sm text-primary font-medium mb-4">Backend Engineer</p>
<p class="text-sm text-muted mb-0">Building robust systems with a focus on security and efficiency.</p>
</div>
<div class="border-b border-subtle py-12 md:pl-8 lg:border-r lg:px-8 lg:last:border-r-0 lg:nth-4:border-r-0">
<img class="size-16 object-cover rounded-full mb-6" src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Sarah Jenkins" />
<h3 class="text-lg font-semibold mb-1">Sarah Jenkins</h3>
<p class="text-sm text-primary font-medium mb-4">UX Designer</p>
<p class="text-sm text-muted mb-0">Creating intuitive interfaces that put the user first.</p>
</div>
<div class="border-b border-subtle py-12 md:border-r md:pr-8 lg:px-8 lg:last:border-r-0 lg:nth-4:border-r-0">
<img class="size-16 object-cover rounded-full mb-6" src="https://images.unsplash.com/photo-1546820389-44d77e1f3b31?q=80&w=764&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="James Wilson" />
<h3 class="text-lg font-semibold mb-1">James Wilson</h3>
<p class="text-sm text-primary font-medium mb-4">Product Manager</p>
<p class="text-sm text-muted mb-0">Bridging the gap between technical teams and business goals.</p>
</div>
<div class="border-b border-subtle py-12 md:pl-8 lg:pl-8">
<img class="size-16 rounded-full object-cover mb-6" src="https://images.unsplash.com/photo-1563584316028-2b70b3a3a8bf?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Maya Patel" />
<h3 class="text-lg font-semibold mb-1">Maya Patel</h3>
<p class="text-sm text-primary font-medium mb-4">Frontend Lead</p>
<p class="text-sm text-muted mb-0">Specializing in modern React architectures and animations.</p>
</div>
</div>
</section>
<section class="px-6 py-20 mx-auto max-w-7xl">
<h1 class="text-3xl sm:text-4xl mb-4">Meet our specialists</h1>
<p class="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.</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<div class="group relative overflow-hidden aspect-4/5">
<img src="https://images.unsplash.com/photo-1556157382-97eda2d62296?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Jordan Smith" class="absolute size-full object-cover grayscale transition-transform duration-700 group-hover:scale-110 group-hover:grayscale-0" />
<div class="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">
<p class="text-white text-xs font-medium mb-2 mt-auto">Creative Director</p>
<h3 class="text-2xl text-white mb-4">Jordan Smith</h3>
<div class="flex gap-4">
<a href="#" class="text-white hover:text-primary text-sm">LinkedIn</a>
<a href="#" class="text-white hover:text-primary text-sm">Twitter</a>
</div>
</div>
</div>
<div class="group relative overflow-hidden aspect-4/5">
<img src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Jordan Smith" class="absolute size-full object-cover grayscale transition-transform duration-700 group-hover:scale-110 group-hover:grayscale-0" />
<div class="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">
<p class="text-white text-xs font-medium mb-2 mt-auto">Lead Developer</p>
<h3 class="text-2xl text-white mb-4">Anya Taylor</h3>
<div class="flex gap-4">
<a href="#" class="text-white hover:text-primary text-sm">Github</a>
<a href="#" class="text-white hover:text-primary text-sm">LinkedIn</a>
</div>
</div>
</div>
<div class="group relative overflow-hidden aspect-4/5">
<img src="https://images.unsplash.com/photo-1552058544-f2b08422138a?auto=format&fit=crop&q=80&w=600" alt="Jordan Smith" class="absolute size-full object-cover grayscale transition-transform duration-700 group-hover:scale-110 group-hover:grayscale-0" />
<div class="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">
<p class="text-white text-xs font-medium mb-2 mt-auto">Product Manager</p>
<h3 class="text-2xl text-white mb-4">David Vose</h3>
<div class="flex gap-4">
<a href="#" class="text-white hover:text-primary text-sm">LinkedIn</a>
<a href="#" class="text-white hover:text-primary text-sm">Twitter</a>
</div>
</div>
</div>
</div>
</section>