Component:

Team Marketing Dark

Name: Team Marketing Dark
Availability: InStock

Free

Tags: Team Content Support Marketing Dark

Colors:

Description:

This carefully crafted Team component is perfect for Marketing landing pages, featuring a Dark 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: Marketing
@style: Dark
@category: Support, Content
@framework: HTML/CSS
@license: Free
-->

<style>
/* CSS Custom Properties */
:root {
  /* Colors */
  --color-white: #ffffff;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-900: #111827;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;

  /* Spacing */
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;

  /* Typography */
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --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;
}

/* Base styles */
.team-section {
  background-color: var(--color-gray-900);
  padding: 6rem 1rem;
  overflow: hidden;
}

.header {
  max-width: 32rem;
  margin: 0 auto 5rem;
  text-align: center;
}

@media (min-width: 1024px) {
  .header {
    max-width: 56rem;
  }
}

.header-tag {
  color: var(--color-blue-400);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--text-base);
}

.header-title {
  margin-top: 0.5rem;
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-white);
}

@media (min-width: 640px) {
  .header-title {
    font-size: var(--text-4xl);
  }
}

.header-description {
  margin-top: 1.5rem;
  font-size: var(--text-lg);
  line-height: 2rem;
  color: var(--color-gray-300);
}

.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem 2rem;
  max-width: 80rem;
  margin: 0 auto;
}

@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 {
  position: relative;
}

.member-image-container {
  aspect-ratio: 3/4;
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
}

.member-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.team-member:hover .member-image {
  transform: scale(1.05);
}

.member-info {
  margin-top: 1.5rem;
}

.member-name {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 2rem;
  letter-spacing: -0.025em;
  color: var(--color-white);
}

.member-role {
  font-size: var(--text-base);
  line-height: 1.75rem;
  color: var(--color-blue-400);
}

.member-description {
  margin-top: 1rem;
  font-size: var(--text-base);
  line-height: 1.75rem;
  color: var(--color-gray-300);
}

.social-links {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.5rem;
  list-style: none;
}

.social-link {
  color: var(--color-gray-400);
  transition: color 0.2s ease;
}

.social-link:hover {
  color: var(--color-blue-400);
}

.social-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.cta-container {
  margin-top: 5rem;
  text-align: center;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  color: var(--color-white);
  background-color: var(--color-blue-600);
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.cta-button:hover {
  background-color: var(--color-blue-700);
}

.cta-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-gray-900), 0 0 0 4px var(--color-blue-500);
}

.cta-icon {
  width: 1.25rem;
  height: 1.25rem;
}

@media (min-width: 640px) {
  .team-section {
    padding: 8rem 1.5rem;
  }
}
</style>

<section class="team-section" aria-labelledby="team-heading">
    <div class="header">
      <h3 class="header-tag">Our Team</h3>
      <h2 id="team-heading" class="header-title">Meet the Creative Minds Behind Our Success</h2>
      <p class="header-description">We're a diverse team of marketing experts, strategists, and creative professionals dedicated to transforming your brand's digital presence.</p>
    </div>

    <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 - Marketing Director" class="member-image">
        </div>
        <div class="member-info">
          <h3 class="member-name">Sarah Johnson</h3>
          <p class="member-role">Marketing Director</p>
          <p class="member-description">10+ years of experience in digital marketing strategy and team leadership.</p>
        </div>
        <ul class="social-links" role="list">
          <li>
            <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>
          </li>
          <li>
            <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>
          </li>
        </ul>
      </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 - Creative Strategist" class="member-image">
        </div>
        <div class="member-info">
          <h3 class="member-name">Michael Chen</h3>
          <p class="member-role">Creative Strategist</p>
          <p class="member-description">Specializes in brand development and creative campaign execution.</p>
        </div>
        <ul class="social-links" role="list">
          <li>
            <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>
          </li>
          <li>
            <a href="#" class="social-link" aria-label="Michael Chen'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>
          </li>
        </ul>
      </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="Emma Rodriguez - Digital Strategist" class="member-image">
        </div>
        <div class="member-info">
          <h3 class="member-name">Emma Rodriguez</h3>
          <p class="member-role">Digital Strategist</p>
          <p class="member-description">Expert in data-driven marketing strategies and campaign optimization.</p>
        </div>
        <ul class="social-links" role="list">
          <li>
            <a href="#" class="social-link" aria-label="Emma 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>
          </li>
          <li>
            <a href="#" class="social-link" aria-label="Emma Rodriguez'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>
          </li>
        </ul>
      </div>
    </div>

    <div class="cta-container">
      <a href="#" class="cta-button" aria-label="Join our team">
        Join Our Team
        <svg class="cta-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>
</section>


                <!--
@type: Team Section
@industry: Marketing
@style: Dark
@category: Support, Content
@framework: Tailwind
@license: Free
-->

<section class="bg-gray-900 py-24 sm:py-32 overflow-hidden" aria-labelledby="team-heading">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-2xl lg:max-w-4xl text-center mb-20">
      <p class="text-blue-400 font-semibold tracking-wide uppercase">Our Team</p>
      <h2 id="team-heading" class="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl">Meet the Creative Minds Behind Our Success</h2>
      <p class="mt-6 text-lg leading-8 text-gray-300">We're a diverse team of marketing experts, strategists, and creative professionals dedicated to transforming your brand's digital presence.</p>
    </div>

    <div class="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-2 lg:grid-cols-3">
      <!-- Team member 1 -->
      <div class="group relative">
        <div class="aspect-[3/4] w-full rounded-2xl overflow-hidden">
          <!-- Marketing team lead image by Pexels -->
          <img src="https://landinggo.com/assets/img/stock/team/team-pexels-1620x1080-1.webp" alt="Sarah Johnson - Marketing Director" class="object-cover w-full h-full transition duration-300 group-hover:scale-105">
        </div>
        <div class="mt-6">
          <h3 class="text-lg font-semibold leading-8 tracking-tight text-white">Sarah Johnson</h3>
          <p class="text-base leading-7 text-blue-400">Marketing Director</p>
          <p class="mt-4 text-base leading-7 text-gray-300">10+ years of experience in digital marketing strategy and team leadership.</p>
        </div>
        <ul role="list" class="mt-6 flex gap-x-6">
          <li>
            <a href="#" class="text-gray-400 hover:text-blue-400 transition-colors" aria-label="Sarah Johnson's LinkedIn profile">
              <svg class="h-5 w-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>
          </li>
          <li>
            <a href="#" class="text-gray-400 hover:text-blue-400 transition-colors" aria-label="Sarah Johnson's Twitter profile">
              <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>
          </li>
        </ul>
      </div>

      <!-- Team member 2 -->
      <div class="group relative">
        <div class="aspect-[3/4] w-full rounded-2xl overflow-hidden">
          <!-- Creative strategist image by Pexels -->
          <img src="https://landinggo.com/assets/img/stock/team/team-pexels-1620x1080-2.webp" alt="Michael Chen - Creative Strategist" class="object-cover w-full h-full transition duration-300 group-hover:scale-105">
        </div>
        <div class="mt-6">
          <h3 class="text-lg font-semibold leading-8 tracking-tight text-white">Michael Chen</h3>
          <p class="text-base leading-7 text-blue-400">Creative Strategist</p>
          <p class="mt-4 text-base leading-7 text-gray-300">Specializes in brand development and creative campaign execution.</p>
        </div>
        <ul role="list" class="mt-6 flex gap-x-6">
          <li>
            <a href="#" class="text-gray-400 hover:text-blue-400 transition-colors" aria-label="Michael Chen's LinkedIn profile">
              <svg class="h-5 w-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>
          </li>
          <li>
            <a href="#" class="text-gray-400 hover:text-blue-400 transition-colors" aria-label="Michael Chen's Twitter profile">
              <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>
          </li>
        </ul>
      </div>

      <!-- Team member 3 -->
      <div class="group relative">
        <div class="aspect-[3/4] w-full rounded-2xl overflow-hidden">
          <!-- Digital strategist image by Pexels -->
          <img src="https://landinggo.com/assets/img/stock/team/team-pexels-1620x1080-3.webp" alt="Emma Rodriguez - Digital Strategist" class="object-cover w-full h-full transition duration-300 group-hover:scale-105">
        </div>
        <div class="mt-6">
          <h3 class="text-lg font-semibold leading-8 tracking-tight text-white">Emma Rodriguez</h3>
          <p class="text-base leading-7 text-blue-400">Digital Strategist</p>
          <p class="mt-4 text-base leading-7 text-gray-300">Expert in data-driven marketing strategies and campaign optimization.</p>
        </div>
        <ul role="list" class="mt-6 flex gap-x-6">
          <li>
            <a href="#" class="text-gray-400 hover:text-blue-400 transition-colors" aria-label="Emma Rodriguez's LinkedIn profile">
              <svg class="h-5 w-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>
          </li>
          <li>
            <a href="#" class="text-gray-400 hover:text-blue-400 transition-colors" aria-label="Emma Rodriguez's Twitter profile">
              <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>
          </li>
        </ul>
      </div>
    </div>

    <div class="mt-20 text-center">
      <a href="#" class="inline-flex items-center gap-x-2 rounded-lg bg-blue-600 px-6 py-3 font-semibold text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-gray-900 transition-colors" aria-label="Join our team">
        Join Our Team
        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>
  </div>
</section>

Team Marketing Dark

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions