Component:

Stats Marketing Dark

Name: Stats Marketing Dark
Availability: InStock

Free

Tailwind

React

Vue

Svelte

Astro

HTML / CSS

Tags: Stats Page Section Social Proof Marketing Dark

Colors:

Description:

This carefully crafted Stats 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: Stats
@industry: Marketing
@style: Dark
@category: Page Section, Social Proof
@framework: HTML/CSS
@license: Free
-->

<style>
/* CSS Custom Properties */
:root {
  /* Colors */
  --color-gray-300: #d1d5db;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-blue-400: #60a5fa;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-white: #ffffff;
  
  /* Spacing */
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-14: 3.5rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
}

/* 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 */
.stats-section {
  background-color: var(--color-gray-900);
  padding: var(--spacing-16) var(--spacing-4);
}

.header {
  max-width: 42rem; /* max-w-2xl */
  margin: 0 auto var(--spacing-16);
  text-align: center;
}

.header h2 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-white);
}

.header p {
  margin-top: var(--spacing-6);
  font-size: 1.125rem;
  line-height: 2rem;
  color: var(--color-gray-300);
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-8);
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8) var(--spacing-6);
  background-color: var(--color-gray-800);
  border: 1px solid var(--color-gray-700);
  border-radius: 0.75rem;
}

.stat-icon {
  display: inline-flex;
  height: var(--spacing-14);
  width: var(--spacing-14);
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: rgba(37, 99, 235, 0.1);
  margin-bottom: var(--spacing-4);
}

.stat-icon svg {
  height: 1.5rem;
  width: 1.5rem;
  color: var(--color-blue-400);
}

.stat-value {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-white);
}

.stat-label {
  margin-top: var(--spacing-4);
  font-size: 1rem;
  line-height: 1.75rem;
  color: var(--color-gray-300);
  text-align: center;
}

.cta-container {
  margin-top: var(--spacing-16);
  display: flex;
  justify-content: center;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem var(--spacing-6);
  font-size: 1rem;
  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;
}

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

.cta-button svg {
  margin-left: 0.5rem;
  margin-right: -0.25rem;
  height: 1.25rem;
  width: 1.25rem;
}

/* Responsive Breakpoints */
@media (min-width: 640px) {
  .stats-section {
    padding: var(--spacing-20) var(--spacing-6);
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .stat-value {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .header h2 {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}
</style>

<section class="stats-section">
    <div class="header">
      <h2>Driving Growth Through Data</h2>
      <p>Our proven marketing strategies have helped businesses achieve remarkable results. Here's what we've accomplished together with our clients.</p>
    </div>

    <dl class="stats-grid">
      <!-- Revenue Growth -->
      <div class="stat-card">
        <div class="stat-icon">
          <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941" />
          </svg>
        </div>
        <dt class="stat-value">245%</dt>
        <dd class="stat-label">Average revenue growth for our clients in 2023</dd>
      </div>

      <!-- Campaigns -->
      <div class="stat-card">
        <div class="stat-icon">
          <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605" />
          </svg>
        </div>
        <dt class="stat-value">1.2K+</dt>
        <dd class="stat-label">Successful marketing campaigns delivered</dd>
      </div>

      <!-- ROI -->
      <div class="stat-card">
        <div class="stat-icon">
          <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <dt class="stat-value">12.8x</dt>
        <dd class="stat-label">Average return on marketing investment</dd>
      </div>

      <!-- Clients -->
      <div class="stat-card">
        <div class="stat-icon">
          <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
          </svg>
        </div>
        <dt class="stat-value">500+</dt>
        <dd class="stat-label">Global clients across industries</dd>
      </div>
    </dl>

    <div class="cta-container">
      <a href="#" class="cta-button" aria-label="Schedule a consultation">
        Schedule a Consultation
        <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>
</section>


                <!--
@type: Stats
@industry: Marketing
@style: Dark
@category: Page Section, Social Proof
@framework: Tailwind
@license: Free
-->

<section class="bg-gray-900 py-16 sm:py-20">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-2xl text-center mb-16">
      <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">Driving Growth Through Data</h2>
      <p class="mt-6 text-lg leading-8 text-gray-300">Our proven marketing strategies have helped businesses achieve remarkable results. Here's what we've accomplished together with our clients.</p>
    </div>

    <dl class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
      <!-- Revenue Growth -->
      <div class="flex flex-col items-center justify-center rounded-xl bg-gray-800 px-6 py-8 border border-gray-700">
        <div class="inline-flex h-14 w-14 items-center justify-center rounded-full bg-blue-600/10 mb-4">
          <svg class="h-6 w-6 text-blue-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941" />
          </svg>
        </div>
        <dt class="text-2xl font-bold tracking-tight text-white md:text-4xl">245%</dt>
        <dd class="mt-4 text-base leading-7 text-gray-300 text-center">Average revenue growth for our clients in 2023</dd>
      </div>

      <!-- Campaigns -->
      <div class="flex flex-col items-center justify-center rounded-xl bg-gray-800 px-6 py-8 border border-gray-700">
        <div class="inline-flex h-14 w-14 items-center justify-center rounded-full bg-blue-600/10 mb-4">
          <svg class="h-6 w-6 text-blue-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605" />
          </svg>
        </div>
        <dt class="text-2xl font-bold tracking-tight text-white md:text-4xl">1.2K+</dt>
        <dd class="mt-4 text-base leading-7 text-gray-300 text-center">Successful marketing campaigns delivered</dd>
      </div>

      <!-- ROI -->
      <div class="flex flex-col items-center justify-center rounded-xl bg-gray-800 px-6 py-8 border border-gray-700">
        <div class="inline-flex h-14 w-14 items-center justify-center rounded-full bg-blue-600/10 mb-4">
          <svg class="h-6 w-6 text-blue-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <dt class="text-2xl font-bold tracking-tight text-white md:text-4xl">12.8x</dt>
        <dd class="mt-4 text-base leading-7 text-gray-300 text-center">Average return on marketing investment</dd>
      </div>

      <!-- Clients -->
      <div class="flex flex-col items-center justify-center rounded-xl bg-gray-800 px-6 py-8 border border-gray-700">
        <div class="inline-flex h-14 w-14 items-center justify-center rounded-full bg-blue-600/10 mb-4">
          <svg class="h-6 w-6 text-blue-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
          </svg>
        </div>
        <dt class="text-2xl font-bold tracking-tight text-white md:text-4xl">500+</dt>
        <dd class="mt-4 text-base leading-7 text-gray-300 text-center">Global clients across industries</dd>
      </div>
    </dl>

    <div class="mt-16 flex justify-center">
      <a href="#" class="inline-flex items-center px-6 py-3 text-base font-semibold text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors duration-200" aria-label="Schedule a consultation">
        Schedule a Consultation
        <svg class="ml-2 -mr-1 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>
  </div>
</section>

Stats Marketing Dark

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions