Component:

Team Business Modern

Name: Team Business Modern
Availability: InStock

Free

Tags: Team Content Support Business Modern

Colors:

Description:

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>

Team Business Modern

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions