Team Business Modern

This carefully crafted Team component is perfect for Business landing pages, featuring a Modern 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: Business
@style: Modern
@category: Support, Content
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
/* Colors */
--color-slate-50: #f8fafc;
--color-slate-200: #e2e8f0;
--color-slate-600: #475569;
--color-slate-900: #0f172a;
--color-indigo-600: #4f46e5;
--color-white: #ffffff;
/* Spacing */
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-10: 2.5rem;
--spacing-16: 4rem;
--spacing-24: 6rem;
/* Container max widths */
--max-width-3xl: 48rem;
--max-width-7xl: 80rem;
/* Font sizes */
--text-sm: 0.875rem;
--text-lg: 1.125rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
}
/* Reset */
* {
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";
}
/* Component styles */
.team-section {
background-color: var(--color-slate-50);
padding: var(--spacing-16) 0;
}
.container {
max-width: var(--max-width-7xl);
margin: 0 auto;
padding: 0 var(--spacing-4);
}
.section-header {
max-width: var(--max-width-3xl);
margin: 0 auto;
text-align: center;
margin-bottom: var(--spacing-10);
}
.section-title {
font-size: var(--text-3xl);
font-weight: 700;
color: var(--color-slate-900);
margin-bottom: var(--spacing-4);
}
.section-description {
font-size: var(--text-lg);
color: var(--color-slate-600);
}
.team-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-8);
}
.team-member {
background-color: var(--color-white);
border-radius: 0.75rem;
padding: var(--spacing-6);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
border: 1px solid var(--color-slate-200);
text-align: center;
}
.member-image {
width: 6rem;
height: 6rem;
border-radius: 50%;
margin: 0 auto var(--spacing-4);
object-fit: cover;
}
.member-name {
font-size: var(--text-lg);
font-weight: 700;
color: var(--color-slate-900);
line-height: 1.5;
}
.member-title {
color: var(--color-indigo-600);
margin-bottom: 0.75rem;
}
.member-bio {
font-size: var(--text-sm);
color: var(--color-slate-600);
line-height: 1.5;
}
/* Responsive breakpoints */
@media (min-width: 640px) {
.team-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.team-section {
padding: var(--spacing-24) 0;
}
.section-title {
font-size: var(--text-4xl);
}
}
@media (min-width: 1024px) {
.team-grid {
grid-template-columns: repeat(4, 1fr);
}
}
</style>
<section class="team-section">
<div class="container">
<!-- Section heading -->
<div class="section-header">
<h2 class="section-title">Meet Our Leadership Team</h2>
<p class="section-description">Our experienced leadership team brings diverse expertise from various industries to deliver exceptional results for our clients.</p>
</div>
<div class="team-grid">
<div class="team-member">
<!-- Team member image by Pexels (CC0) -->
<img
src="https://landinggo.com/assets/img/stock/team/team-40x40-1.webp"
alt="Sarah Johnson, CEO"
class="member-image"
width="40"
height="40"
loading="lazy"
/>
<h4 class="member-name">Sarah Johnson</h4>
<p class="member-title">Chief Executive Officer</p>
<p class="member-bio">Former VP at Fortune 500 company with 15+ years of leadership experience in business transformation.</p>
</div>
<div class="team-member">
<!-- Team member image by Pexels (CC0) -->
<img
src="https://landinggo.com/assets/img/stock/team/team-40x40-2.webp"
alt="Michael Chen, CTO"
class="member-image"
width="40"
height="40"
loading="lazy"
/>
<h4 class="member-name">Michael Chen</h4>
<p class="member-title">Chief Technology Officer</p>
<p class="member-bio">Tech innovator with background in software development and AI implementation across multiple industries.</p>
</div>
<div class="team-member">
<!-- Team member image by Pexels (CC0) -->
<img
src="https://landinggo.com/assets/img/stock/team/team-40x40-3.webp"
alt="David Rodriguez, COO"
class="member-image"
width="40"
height="40"
loading="lazy"
/>
<h4 class="member-name">David Rodriguez</h4>
<p class="member-title">Chief Operations Officer</p>
<p class="member-bio">Operations expert specializing in streamlining processes and optimizing business performance.</p>
</div>
<div class="team-member">
<!-- Team member image by Pexels (CC0) -->
<img
src="https://landinggo.com/assets/img/stock/team/team-40x40-4.webp"
alt="Emily Taylor, CMO"
class="member-image"
width="40"
height="40"
loading="lazy"
/>
<h4 class="member-name">Emily Taylor</h4>
<p class="member-title">Chief Marketing Officer</p>
<p class="member-bio">Strategic marketing leader with expertise in brand development and digital marketing campaigns.</p>
</div>
</div>
</div>
</section>
<!--
@type: Team
@industry: Business
@style: Modern
@category: Support, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-slate-50 py-16 md:py-24">
<div class="container mx-auto px-4 max-w-7xl">
<!-- Section heading -->
<div class="max-w-3xl mx-auto text-center mb-10">
<h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Meet Our Leadership Team</h2>
<p class="text-lg text-slate-600">Our experienced leadership team brings diverse expertise from various industries to deliver exceptional results for our clients.</p>
</div>
<div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 text-center">
<!-- Team member image by Pexels (CC0) -->
<img
src="https://landinggo.com/assets/img/stock/team/team-40x40-1.webp"
alt="Sarah Johnson, CEO"
class="w-24 h-24 rounded-full mx-auto mb-4 object-cover"
width="40"
height="40"
loading="lazy"
/>
<h4 class="text-lg font-bold text-slate-900">Sarah Johnson</h4>
<p class="text-indigo-600 mb-3">Chief Executive Officer</p>
<p class="text-slate-600 text-sm">Former VP at Fortune 500 company with 15+ years of leadership experience in business transformation.</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 text-center">
<!-- Team member image by Pexels (CC0) -->
<img
src="https://landinggo.com/assets/img/stock/team/team-40x40-2.webp"
alt="Michael Chen, CTO"
class="w-24 h-24 rounded-full mx-auto mb-4 object-cover"
width="40"
height="40"
loading="lazy"
/>
<h4 class="text-lg font-bold text-slate-900">Michael Chen</h4>
<p class="text-indigo-600 mb-3">Chief Technology Officer</p>
<p class="text-slate-600 text-sm">Tech innovator with background in software development and AI implementation across multiple industries.</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 text-center">
<!-- Team member image by Pexels (CC0) -->
<img
src="https://landinggo.com/assets/img/stock/team/team-40x40-3.webp"
alt="David Rodriguez, COO"
class="w-24 h-24 rounded-full mx-auto mb-4 object-cover"
width="40"
height="40"
loading="lazy"
/>
<h4 class="text-lg font-bold text-slate-900">David Rodriguez</h4>
<p class="text-indigo-600 mb-3">Chief Operations Officer</p>
<p class="text-slate-600 text-sm">Operations expert specializing in streamlining processes and optimizing business performance.</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 text-center">
<!-- Team member image by Pexels (CC0) -->
<img
src="https://landinggo.com/assets/img/stock/team/team-40x40-4.webp"
alt="Emily Taylor, CMO"
class="w-24 h-24 rounded-full mx-auto mb-4 object-cover"
width="40"
height="40"
loading="lazy"
/>
<h4 class="text-lg font-bold text-slate-900">Emily Taylor</h4>
<p class="text-indigo-600 mb-3">Chief Marketing Officer</p>
<p class="text-slate-600 text-sm">Strategic marketing leader with expertise in brand development and digital marketing campaigns.</p>
</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