Component:
Team SaaS Minimal
Colors:
Description:
This carefully crafted Team component is perfect for SaaS 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 Section
@industry: SaaS
@style: Minimal
@category: Support, Content
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
--color-white: #ffffff;
--color-gray-100: #f3f4f6;
--color-gray-400: #9ca3af;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-blue-600: #2563eb;
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
--max-width-3xl: 48rem;
--max-width-7xl: 80rem;
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Base Styles */
.team-section {
background-color: var(--color-white);
padding: var(--spacing-12) var(--spacing-4);
font-family: var(--font-sans);
}
.team-container {
max-width: var(--max-width-7xl);
margin: 0 auto;
}
/* Header Styles */
.team-header {
text-align: center;
max-width: var(--max-width-3xl);
margin: 0 auto var(--spacing-16);
}
.team-label {
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--color-blue-600);
text-transform: uppercase;
margin-bottom: var(--spacing-3);
}
.team-title {
font-size: 1.875rem;
font-weight: 600;
color: var(--color-gray-900);
margin-bottom: var(--spacing-4);
}
.team-description {
font-size: 1.125rem;
color: var(--color-gray-600);
}
/* Team Grid */
.team-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-12);
margin-bottom: var(--spacing-16);
}
/* Team Member Card */
.team-member {
display: flex;
flex-direction: column;
align-items: center;
}
.member-image-container {
position: relative;
width: 100%;
margin-bottom: var(--spacing-6);
aspect-ratio: 4/5;
border-radius: 0.5rem;
overflow: hidden;
background-color: var(--color-gray-100);
}
.member-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.member-name {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-gray-900);
margin-bottom: 0.25rem;
}
.member-role {
font-size: 0.875rem;
color: var(--color-blue-600);
margin-bottom: var(--spacing-3);
}
.member-bio {
font-size: 1rem;
color: var(--color-gray-600);
text-align: center;
margin-bottom: var(--spacing-4);
}
/* Social Links */
.social-links {
display: flex;
gap: var(--spacing-4);
}
.social-link {
color: var(--color-gray-400);
transition: color 0.2s ease;
}
.social-link:hover {
color: var(--color-gray-600);
}
.social-icon {
width: 1.25rem;
height: 1.25rem;
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.team-section {
padding: 4rem var(--spacing-6);
}
.team-title {
font-size: 2.25rem;
}
.team-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.team-section {
padding: 5rem var(--spacing-8);
}
.team-grid {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
<section class="team-section" aria-labelledby="team-heading">
<div class="team-container">
<!-- Section Header -->
<div class="team-header">
<p class="team-label">Our Team</p>
<h2 id="team-heading" class="team-title">Meet the innovators behind our success</h2>
<p class="team-description">We're a diverse team of talented individuals working together to revolutionize the SaaS industry with innovative solutions.</p>
</div>
<!-- Leadership Team Grid -->
<div class="team-grid">
<!-- Team Member 1 -->
<div class="team-member">
<div class="member-image-container">
<img src="https://landinggo.com/assets/img/stock/team/team-pexels-1620x1080-1.webp"
alt="Sarah Johnson - CEO"
class="member-image"
loading="lazy">
</div>
<h3 class="member-name">Sarah Johnson</h3>
<p class="member-role">Chief Executive Officer</p>
<p class="member-bio">Former VP of Product at Salesforce with 15+ years of SaaS experience.</p>
<div class="social-links">
<a href="#" class="social-link" aria-label="Sarah Johnson's LinkedIn profile">
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
</a>
<a href="#" class="social-link" aria-label="Sarah Johnson's Twitter profile">
<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-member">
<div class="member-image-container">
<img src="https://landinggo.com/assets/img/stock/team/team-pexels-1620x1080-2.webp"
alt="Michael Chen - CTO"
class="member-image"
loading="lazy">
</div>
<h3 class="member-name">Michael Chen</h3>
<p class="member-role">Chief Technology Officer</p>
<p class="member-bio">Ex-Google engineer specializing in AI and cloud infrastructure.</p>
<div class="social-links">
<a href="#" class="social-link" aria-label="Michael Chen's LinkedIn profile">
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
</a>
<a href="#" class="social-link" aria-label="Michael Chen'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"/>
</svg>
</a>
</div>
</div>
<!-- Team Member 3 -->
<div class="team-member">
<div class="member-image-container">
<img src="https://landinggo.com/assets/img/stock/team/team-pexels-1620x1080-3.webp"
alt="Emily Rodriguez - Head of Design"
class="member-image"
loading="lazy">
</div>
<h3 class="member-name">Emily Rodriguez</h3>
<p class="member-role">Head of Design</p>
<p class="member-bio">Award-winning designer focused on creating intuitive user experiences.</p>
<div class="social-links">
<a href="#" class="social-link" aria-label="Emily Rodriguez's LinkedIn profile">
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
</a>
<a href="#" class="social-link" aria-label="Emily Rodriguez's Dribbble profile">
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
<!--
@type: Team Section
@industry: SaaS
@style: Minimal
@category: Support, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-12 sm:py-16 lg:py-20" aria-labelledby="team-heading">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="text-center max-w-3xl mx-auto mb-16">
<p class="text-sm font-semibold tracking-wide text-blue-600 uppercase mb-3">Our Team</p>
<h2 id="team-heading" class="text-3xl font-semibold text-gray-900 sm:text-4xl mb-4">Meet the innovators behind our success</h2>
<p class="text-lg text-gray-600">We're a diverse team of talented individuals working together to revolutionize the SaaS industry with innovative solutions.</p>
</div>
<!-- Leadership Team Grid -->
<div class="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3 mb-16">
<!-- Team Member 1 -->
<div class="flex flex-col items-center">
<div class="relative mb-6 w-full aspect-[4/5] rounded-lg overflow-hidden bg-gray-100">
<!-- Team member image by Pexels -->
<img src="https://landinggo.com/assets/img/stock/team/team-pexels-1620x1080-1.webp"
alt="Sarah Johnson - CEO"
class="w-full h-full object-cover"
loading="lazy">
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-1">Sarah Johnson</h3>
<p class="text-sm text-blue-600 mb-3">Chief Executive Officer</p>
<p class="text-base text-gray-600 text-center mb-4">Former VP of Product at Salesforce with 15+ years of SaaS experience.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-gray-600" aria-label="Sarah Johnson's LinkedIn profile">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-600" aria-label="Sarah Johnson's Twitter profile">
<svg class="w-5 h-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="flex flex-col items-center">
<div class="relative mb-6 w-full aspect-[4/5] rounded-lg overflow-hidden bg-gray-100">
<!-- Team member image by Pexels -->
<img src="https://landinggo.com/assets/img/stock/team/team-pexels-1620x1080-2.webp"
alt="Michael Chen - CTO"
class="w-full h-full object-cover"
loading="lazy">
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-1">Michael Chen</h3>
<p class="text-sm text-blue-600 mb-3">Chief Technology Officer</p>
<p class="text-base text-gray-600 text-center mb-4">Ex-Google engineer specializing in AI and cloud infrastructure.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-gray-600" aria-label="Michael Chen's LinkedIn profile">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-600" aria-label="Michael Chen's GitHub profile">
<svg class="w-5 h-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"/>
</svg>
</a>
</div>
</div>
<!-- Team Member 3 -->
<div class="flex flex-col items-center">
<div class="relative mb-6 w-full aspect-[4/5] rounded-lg overflow-hidden bg-gray-100">
<!-- Team member image by Pexels -->
<img src="https://landinggo.com/assets/img/stock/team/team-pexels-1620x1080-3.webp"
alt="Emily Rodriguez - Head of Design"
class="w-full h-full object-cover"
loading="lazy">
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-1">Emily Rodriguez</h3>
<p class="text-sm text-blue-600 mb-3">Head of Design</p>
<p class="text-base text-gray-600 text-center mb-4">Award-winning designer focused on creating intuitive user experiences.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-gray-600" aria-label="Emily Rodriguez's LinkedIn profile">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-600" aria-label="Emily Rodriguez's Dribbble profile">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"/>
</svg>
</a>
</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