Component:
Team Product Light
Colors:
Description:
This carefully crafted Team component is perfect for Product landing pages, featuring a Light design that looks great and converts well.
Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.
<!--
@type: Team
@industry: Product
@style: Light
@category: Support, Content
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
/* Colors */
--color-white: #ffffff;
--color-gray-50: #f9fafb;
--color-gray-200: #e5e7eb;
--color-gray-400: #9ca3af;
--color-gray-600: #4b5563;
--color-gray-800: #1f2937;
--color-blue-600: #2563eb;
/* Spacing */
--spacing-1: 0.25rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-16: 4rem;
--spacing-24: 6rem;
/* Container */
--container-max-width: 80rem; /* max-w-7xl */
--content-max-width: 48rem; /* max-w-3xl */
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Base Styles */
body {
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
line-height: 1.5;
}
/* Component Styles */
.team-section {
background-color: var(--color-gray-50);
padding: var(--spacing-16) 0;
}
.team-container {
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 var(--spacing-4);
}
.section-header {
text-align: center;
margin-bottom: var(--spacing-16);
}
.section-title {
font-size: 1.875rem;
font-weight: 500;
color: var(--color-gray-800);
margin-bottom: var(--spacing-4);
}
.section-description {
font-size: 1.125rem;
color: var(--color-gray-600);
max-width: var(--content-max-width);
margin: 0 auto;
}
.team-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-8);
}
.team-card {
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: 1rem;
padding: var(--spacing-8);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
text-align: center;
}
.member-image-wrapper {
width: 6rem;
height: 6rem;
border-radius: 9999px;
margin: 0 auto var(--spacing-6) auto;
overflow: hidden;
}
.member-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.member-name {
font-size: 1.25rem;
font-weight: 400;
color: var(--color-gray-800);
margin-bottom: var(--spacing-1);
}
.member-title {
color: var(--color-blue-600);
margin-bottom: var(--spacing-4);
}
.member-bio {
color: var(--color-gray-600);
margin-bottom: var(--spacing-6);
}
.social-links {
display: flex;
justify-content: center;
gap: var(--spacing-4);
}
.social-link {
color: var(--color-gray-400);
transition: color 0.2s ease;
}
.social-link:hover {
color: var(--color-blue-600);
}
.social-icon {
width: 1.25rem;
height: 1.25rem;
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.team-section {
padding: var(--spacing-24) 0;
}
.team-container {
padding: 0 var(--spacing-6);
}
.team-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.team-container {
padding: 0 var(--spacing-8);
}
.team-grid {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
<section class="team-section">
<div class="team-container">
<!-- Section header -->
<div class="section-header">
<h2 class="section-title">Meet Our Leadership</h2>
<p class="section-description">Our diverse team brings decades of experience from design, technology, and business.</p>
</div>
<div>
<div class="team-grid">
<!-- Team member 1 -->
<div class="team-card">
<div class="member-image-wrapper">
<img
src="https://landinggo.com/assets/img/stock/team/team-40x40-1.webp"
alt="Sarah Chen, CEO"
class="member-image"
loading="lazy"
width="40"
height="40"
>
</div>
<h4 class="member-name">Sarah Chen</h4>
<p class="member-title">CEO & Co-founder</p>
<p class="member-bio">Former design lead at Figma with 15+ years of experience in product design and UX strategy.</p>
<div class="social-links">
<a href="#" class="social-link" aria-label="Sarah Chen's LinkedIn profile">
<svg xmlns="http://www.w3.org/2000/svg" class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
<a href="#" class="social-link" aria-label="Sarah Chen's Twitter profile">
<svg xmlns="http://www.w3.org/2000/svg" class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
</svg>
</a>
</div>
</div>
<!-- Team member 2 -->
<div class="team-card">
<div class="member-image-wrapper">
<img
src="https://landinggo.com/assets/img/stock/team/team-40x40-2.webp"
alt="Marcus Johnson, CTO"
class="member-image"
loading="lazy"
width="40"
height="40"
>
</div>
<h4 class="member-name">Marcus Johnson</h4>
<p class="member-title">CTO & Co-founder</p>
<p class="member-bio">Previously engineering lead at Adobe with expertise in WebGL, Canvas APIs, and performance optimization.</p>
<div class="social-links">
<a href="#" class="social-link" aria-label="Marcus Johnson's LinkedIn profile">
<svg xmlns="http://www.w3.org/2000/svg" class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
<a href="#" class="social-link" aria-label="Marcus Johnson's GitHub profile">
<svg xmlns="http://www.w3.org/2000/svg" class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" clip-rule="evenodd"/>
</svg>
</a>
</div>
</div>
<!-- Team member 3 -->
<div class="team-card">
<div class="member-image-wrapper">
<img
src="https://landinggo.com/assets/img/stock/team/team-40x40-3.webp"
alt="Aisha Patel, COO"
class="member-image"
loading="lazy"
width="40"
height="40"
>
</div>
<h4 class="member-name">Aisha Patel</h4>
<p class="member-title">COO</p>
<p class="member-bio">Former operations director at Canva with expertise in scaling design-focused SaaS businesses globally.</p>
<div class="social-links">
<a href="#" class="social-link" aria-label="Aisha Patel's LinkedIn profile">
<svg xmlns="http://www.w3.org/2000/svg" class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
<a href="#" class="social-link" aria-label="Aisha Patel's Twitter profile">
<svg xmlns="http://www.w3.org/2000/svg" class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--
@type: Team
@industry: Product
@style: Light
@category: Support, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-50 py-16 sm:py-24">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Section header -->
<div class="text-center mb-16">
<h2 class="text-3xl font-medium text-gray-800 mb-4">Meet Our Leadership</h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">Our diverse team brings decades of experience from design, technology, and business.</p>
</div>
<div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Team member 1 -->
<div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm text-center">
<div class="w-24 h-24 rounded-full mx-auto mb-6 overflow-hidden">
<!-- Team member image by Pexels -->
<img
src="https://landinggo.com/assets/img/stock/team/team-40x40-1.webp"
alt="Sarah Chen, CEO"
class="w-full h-full object-cover"
loading="lazy"
width="40"
height="40"
>
</div>
<h4 class="text-xl font-normal text-gray-800 mb-1">Sarah Chen</h4>
<p class="text-blue-600 mb-4">CEO & Co-founder</p>
<p class="text-gray-600 mb-6">Former design lead at Figma with 15+ years of experience in product design and UX strategy.</p>
<div class="flex justify-center space-x-4">
<a href="#" class="text-gray-400 hover:text-blue-600" aria-label="Sarah Chen's LinkedIn profile">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-blue-600" aria-label="Sarah Chen's Twitter profile">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
</svg>
</a>
</div>
</div>
<!-- Team member 2 -->
<div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm text-center">
<div class="w-24 h-24 rounded-full mx-auto mb-6 overflow-hidden">
<!-- Team member image by Pexels -->
<img
src="https://landinggo.com/assets/img/stock/team/team-40x40-2.webp"
alt="Marcus Johnson, CTO"
class="w-full h-full object-cover"
loading="lazy"
width="40"
height="40"
>
</div>
<h4 class="text-xl font-normal text-gray-800 mb-1">Marcus Johnson</h4>
<p class="text-blue-600 mb-4">CTO & Co-founder</p>
<p class="text-gray-600 mb-6">Previously engineering lead at Adobe with expertise in WebGL, Canvas APIs, and performance optimization.</p>
<div class="flex justify-center space-x-4">
<a href="#" class="text-gray-400 hover:text-blue-600" aria-label="Marcus Johnson's LinkedIn profile">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-blue-600" aria-label="Marcus Johnson's GitHub profile">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" clip-rule="evenodd"/>
</svg>
</a>
</div>
</div>
<!-- Team member 3 -->
<div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm text-center">
<div class="w-24 h-24 rounded-full mx-auto mb-6 overflow-hidden">
<!-- Team member image by Pexels -->
<img
src="https://landinggo.com/assets/img/stock/team/team-40x40-3.webp"
alt="Aisha Patel, COO"
class="w-full h-full object-cover"
loading="lazy"
width="40"
height="40"
>
</div>
<h4 class="text-xl font-normal text-gray-800 mb-1">Aisha Patel</h4>
<p class="text-blue-600 mb-4">COO</p>
<p class="text-gray-600 mb-6">Former operations director at Canva with expertise in scaling design-focused SaaS businesses globally.</p>
<div class="flex justify-center space-x-4">
<a href="#" class="text-gray-400 hover:text-blue-600" aria-label="Aisha Patel's LinkedIn profile">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-blue-600" aria-label="Aisha Patel's Twitter profile">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
This is a Pro component
Access the full component collection
Get all premium components and focus on building your business
Only 42 early bird spots left 40% offUnlock for $29
(one-time payment)Early bird discount. Regular price $49
Premium components
Get access to all pro Tailwind CSS components. New ones added monthly
Save components
Save your favorite components to your account
Unlimited usage
Use components as often as you want
Landing page submissions
Get your landing pages featured on LandingGo and earn a
strong backlink
21 DR dofollow backlink from the main page