Component:
Free Team Software Minimal
Tailwind
Tailwind
React
Vue
Svelte
Astro
HTML / CSS
Colors:
Description:
This carefully crafted Team component is perfect for Software landing pages, featuring a Minimal 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: Software
@style: Minimal
@category: Page Section, Company
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--color-white: #ffffff;
--color-gray-400: #9ca3af;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-indigo-600: #4f46e5;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.team-section {
background-color: var(--color-white);
padding: 4rem 1rem;
}
@media (min-width: 640px) {
.team-section {
padding: 6rem 1.5rem;
}
}
.container {
max-width: 80rem;
margin: 0 auto;
}
@media (min-width: 640px) {
.container {
padding: 0 1.5rem;
}
}
@media (min-width: 1024px) {
.container {
padding: 0 2rem;
}
}
.team-header {
text-align: center;
max-width: 48rem;
margin: 0 auto 4rem;
}
.header-badge {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-indigo-600);
}
.header-title {
margin-top: 0.5rem;
font-size: 1.875rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-gray-900);
}
@media (min-width: 640px) {
.header-title {
font-size: 2.25rem;
}
}
.header-description {
margin-top: 1rem;
font-size: 1.125rem;
color: var(--color-gray-600);
}
.leadership-section {
margin-bottom: 5rem;
}
.leadership-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-gray-900);
text-align: center;
margin-bottom: 2rem;
}
.team-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
}
@media (min-width: 640px) {
.team-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.team-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.team-member {
text-align: center;
}
.member-image-wrapper {
position: relative;
width: 12rem;
height: 12rem;
margin: 0 auto 1.5rem;
overflow: hidden;
border-radius: 9999px;
}
.member-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.team-member-name {
font-size: 1.125rem;
font-weight: 500;
color: var(--color-gray-900);
}
.team-member-role {
color: var(--color-indigo-600);
font-weight: 500;
}
.team-member-bio {
margin-top: 0.75rem;
color: var(--color-gray-600);
max-width: 20rem;
margin-left: auto;
margin-right: auto;
}
.social-links {
margin-top: 1rem;
display: flex;
justify-content: center;
gap: 1rem;
}
.social-link {
color: var(--color-gray-400);
transition: color 0.2s;
}
.social-link:hover {
color: var(--color-gray-600);
}
.social-icon {
width: 1.25rem;
height: 1.25rem;
}
</style>
<section class="team-section" aria-labelledby="team-heading">
<div class="container">
<!-- Section Header -->
<div class="team-header">
<span class="header-badge">Our Team</span>
<h2 id="team-heading" class="header-title">
Meet the people behind the platform
</h2>
<p class="header-description">
A diverse team of entrepreneurs, engineers, and industry experts dedicated to helping small businesses succeed
</p>
</div>
<!-- Leadership Team -->
<div class="leadership-section">
<h3 class="leadership-title">Leadership Team</h3>
<div class="team-grid">
<!-- Team Member 1 -->
<div class="team-member">
<div class="member-image-wrapper">
<img class="member-image" src="https://landinggo.com/assets/img/stock/team/team-40x40-1.webp" alt="Sarah Chen" width="192" height="192" loading="lazy">
</div>
<h4 class="team-member-name">Sarah Chen</h4>
<p class="team-member-role">CEO & Co-founder</p>
<p class="team-member-bio">
Former small business owner with 15 years of experience in retail and e-commerce operations.
</p>
<div class="social-links">
<a href="#" class="social-link" aria-label="Sarah Chen's LinkedIn profile">
<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 class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"/>
</svg>
</a>
</div>
</div>
<!-- Team Member 2 -->
<div class="team-member">
<div class="member-image-wrapper">
<img class="member-image" src="https://landinggo.com/assets/img/stock/team/team-40x40-2.webp" alt="Michael Rodriguez" width="192" height="192" loading="lazy">
</div>
<h4 class="team-member-name">Michael Rodriguez</h4>
<p class="team-member-role">CTO & Co-founder</p>
<p class="team-member-bio">
20+ years in software development with expertise in building scalable solutions for small businesses.
</p>
<div class="social-links">
<a href="#" class="social-link" aria-label="Michael Rodriguez's LinkedIn profile">
<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="Michael Rodriguez's GitHub profile">
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"/>
</svg>
</a>
</div>
</div>
<!-- Team Member 3 -->
<div class="team-member">
<div class="member-image-wrapper">
<img class="member-image" src="https://landinggo.com/assets/img/stock/team/team-40x40-3.webp" alt="Emily Taylor" width="192" height="192" loading="lazy">
</div>
<h4 class="team-member-name">Emily Taylor</h4>
<p class="team-member-role">COO & Co-founder</p>
<p class="team-member-bio">
Former consultant specializing in small business operations and efficiency optimization.
</p>
<div class="social-links">
<a href="#" class="social-link" aria-label="Emily Taylor's LinkedIn profile">
<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="Emily Taylor's Twitter profile">
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--
@type: Team
@industry: Software
@style: Minimal
@category: Page Section, Company
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-16 sm:py-24" aria-labelledby="team-heading">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="mx-auto max-w-3xl text-center mb-16">
<span class="text-lg font-semibold text-indigo-600">Our Team</span>
<h2 id="team-heading" class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Meet the people behind the platform
</h2>
<p class="mt-4 text-lg text-gray-600">
A diverse team of entrepreneurs, engineers, and industry experts dedicated to helping small businesses succeed
</p>
</div>
<!-- Leadership Team -->
<div class="mb-20">
<h3 class="text-xl font-bold text-gray-900 mb-8 text-center">Leadership Team</h3>
<div class="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
<!-- Team Member 1 -->
<div class="text-center">
<div class="relative mx-auto h-48 w-48 overflow-hidden rounded-full mb-6">
<img class="h-full w-full object-cover" src="https://landinggo.com/assets/img/stock/team/team-40x40-1.webp" alt="Sarah Chen" width="192" height="192" loading="lazy">
</div>
<h4 class="text-lg font-medium text-gray-900">Sarah Chen</h4>
<p class="text-indigo-600 font-medium">CEO & Co-founder</p>
<p class="mt-3 text-gray-600 max-w-xs mx-auto">
Former small business owner with 15 years of experience in retail and e-commerce operations.
</p>
<div class="mt-4 flex justify-center space-x-4">
<a href="#" class="text-gray-400 hover:text-gray-600" aria-label="Sarah Chen's LinkedIn profile">
<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-gray-600" aria-label="Sarah Chen's Twitter profile">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"/>
</svg>
</a>
</div>
</div>
<!-- Team Member 2 -->
<div class="text-center">
<div class="relative mx-auto h-48 w-48 overflow-hidden rounded-full mb-6">
<img class="h-full w-full object-cover" src="https://landinggo.com/assets/img/stock/team/team-40x40-2.webp" alt="Michael Rodriguez" width="192" height="192" loading="lazy">
</div>
<h4 class="text-lg font-medium text-gray-900">Michael Rodriguez</h4>
<p class="text-indigo-600 font-medium">CTO & Co-founder</p>
<p class="mt-3 text-gray-600 max-w-xs mx-auto">
20+ years in software development with expertise in building scalable solutions for small businesses.
</p>
<div class="mt-4 flex justify-center space-x-4">
<a href="#" class="text-gray-400 hover:text-gray-600" aria-label="Michael Rodriguez's LinkedIn profile">
<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-gray-600" aria-label="Michael Rodriguez's GitHub profile">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"/>
</svg>
</a>
</div>
</div>
<!-- Team Member 3 -->
<div class="text-center">
<div class="relative mx-auto h-48 w-48 overflow-hidden rounded-full mb-6">
<img class="h-full w-full object-cover" src="https://landinggo.com/assets/img/stock/team/team-40x40-3.webp" alt="Emily Taylor" width="192" height="192" loading="lazy">
</div>
<h4 class="text-lg font-medium text-gray-900">Emily Taylor</h4>
<p class="text-indigo-600 font-medium">COO & Co-founder</p>
<p class="mt-3 text-gray-600 max-w-xs mx-auto">
Former consultant specializing in small business operations and efficiency optimization.
</p>
<div class="mt-4 flex justify-center space-x-4">
<a href="#" class="text-gray-400 hover:text-gray-600" aria-label="Emily Taylor's LinkedIn profile">
<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-gray-600" aria-label="Emily Taylor's Twitter profile">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"/>
</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
Unlock for $49
(one-time payment)Early bird discount. Lock in this price forever
Premium components
Get access to all pro 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