Component:
Stats SaaS Minimal
Colors:
Description:
This carefully crafted Stats 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: Stats
@industry: SaaS
@style: Minimal
@category: Page Section, Social Proof
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
/* Colors */
--color-white: #ffffff;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-blue-500: #3b82f6;
/* Spacing */
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-16: 4rem;
--spacing-24: 6rem;
--spacing-32: 8rem;
}
/* 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-white);
padding: var(--spacing-24) 0;
}
.container {
max-width: 80rem; /* max-w-7xl */
margin: 0 auto;
padding: 0 var(--spacing-6);
}
.content-wrapper {
margin: 0 auto;
max-width: 42rem; /* max-w-2xl */
width: 100%;
}
.header {
text-align: center;
}
.title {
font-size: 1.875rem;
line-height: 2.25rem;
font-weight: 600;
color: var(--color-gray-900);
margin-bottom: 1rem;
}
.subtitle {
margin-top: var(--spacing-4);
font-size: 1.125rem;
line-height: 1.75rem;
color: var(--color-gray-600);
}
.stats-grid {
margin-top: var(--spacing-16);
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-8);
width: 100%;
}
.stat-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
border: 1px solid var(--color-gray-200);
border-radius: 0.5rem;
padding: var(--spacing-8);
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
transition: box-shadow 0.2s ease-in-out;
}
.stat-card:hover {
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.stat-label {
font-size: 1rem;
line-height: 1.75rem;
color: var(--color-gray-600);
}
.stat-value {
order: -1;
font-size: 1.875rem;
font-weight: 600;
letter-spacing: -0.025em;
color: var(--color-gray-900);
}
.stat-detail {
font-size: 0.875rem;
color: var(--color-gray-500);
}
.cta-wrapper {
margin-top: var(--spacing-16);
display: flex;
justify-content: center;
}
.cta-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
border-radius: 0.375rem;
background-color: var(--color-white);
padding: var(--spacing-3) var(--spacing-6);
font-size: 1rem;
font-weight: 600;
color: var(--color-gray-900);
border: 1px solid var(--color-gray-300);
text-decoration: none;
}
.cta-button:hover {
background-color: #f9fafb;
}
.cta-button:focus {
outline: none;
ring: 2px solid var(--color-blue-500);
ring-offset: 2px;
}
.cta-icon {
height: 1.25rem;
width: 1.25rem;
}
.logo-section {
margin-top: var(--spacing-16);
padding-top: var(--spacing-8);
border-top: 1px solid var(--color-gray-200);
}
.logo-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-8);
}
.logo-image {
height: 2rem;
width: 100%;
object-fit: contain;
filter: grayscale(100%);
opacity: 0.75;
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.stats-section {
padding: var(--spacing-32) 0;
}
.title {
font-size: 2.25rem;
line-height: 2.5rem;
}
.stats-grid {
margin-top: var(--spacing-20);
grid-template-columns: repeat(2, 1fr);
}
.stat-value {
font-size: 3rem;
line-height: 1;
}
}
@media (min-width: 768px) {
.logo-grid {
grid-template-columns: repeat(6, 1fr);
}
}
@media (min-width: 1024px) {
.container {
padding: 0 var(--spacing-8);
}
.content-wrapper {
max-width: none;
}
.stats-grid {
grid-template-columns: repeat(4, 1fr);
}
.logo-grid {
grid-template-columns: repeat(7, 1fr);
}
}
</style>
<section class="stats-section">
<div class="container">
<div class="content-wrapper">
<div class="header">
<h2 class="title">Trusted by innovative teams worldwide</h2>
<p class="subtitle">Join thousands of companies that have transformed their operations with our platform</p>
</div>
<dl class="stats-grid">
<div class="stat-card">
<dt class="stat-label">Active Users</dt>
<dd class="stat-value">100K+</dd>
<div class="stat-detail">↑ 24% from last year</div>
</div>
<div class="stat-card">
<dt class="stat-label">Data Processed</dt>
<dd class="stat-value">500TB</dd>
<div class="stat-detail">Daily average</div>
</div>
<div class="stat-card">
<dt class="stat-label">Customer Rating</dt>
<dd class="stat-value">4.9/5</dd>
<div class="stat-detail">Based on 10K+ reviews</div>
</div>
<div class="stat-card">
<dt class="stat-label">Global Reach</dt>
<dd class="stat-value">150+</dd>
<div class="stat-detail">Countries served</div>
</div>
</dl>
<div class="cta-wrapper">
<a href="#" class="cta-button" aria-label="View detailed analytics">
View detailed analytics
<svg class="cta-icon" 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 class="logo-section">
<div class="logo-grid">
<!-- Dropbox logo -->
<img class="logo-image" src="https://landinggo.com/assets/img/stock/logo-cloud/dropbox-logo-200x39.webp" alt="Dropbox" width="200" height="39">
<!-- Google logo -->
<img class="logo-image" src="https://landinggo.com/assets/img/stock/logo-cloud/google-logo-200x83.webp" alt="Google" width="200" height="83">
<!-- Notion logo -->
<img class="logo-image" src="https://landinggo.com/assets/img/stock/logo-cloud/notion-logo-200x70.webp" alt="Notion" width="200" height="70">
<!-- Product Hunt logo -->
<img class="logo-image" src="https://landinggo.com/assets/img/stock/logo-cloud/product-hunt-logo-200x72.webp" alt="Product Hunt" width="200" height="72">
<!-- Shopify logo -->
<img class="logo-image" src="https://landinggo.com/assets/img/stock/logo-cloud/shopify-logo-200x63.webp" alt="Shopify" width="200" height="63">
<!-- Slack logo -->
<img class="logo-image" src="https://landinggo.com/assets/img/stock/logo-cloud/slack-logo-200x51.webp" alt="Slack" width="200" height="51">
<!-- Stripe logo -->
<img class="logo-image" src="https://landinggo.com/assets/img/stock/logo-cloud/stripe-logo-200x93.webp" alt="Stripe" width="200" height="93">
</div>
</div>
</div>
</div>
</section>
<!--
@type: Stats
@industry: SaaS
@style: Minimal
@category: Page Section, Social Proof
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-none">
<div class="text-center">
<h2 class="text-3xl font-semibold text-gray-900 sm:text-4xl mb-4">Trusted by innovative teams worldwide</h2>
<p class="mt-4 text-lg leading-8 text-gray-600">Join thousands of companies that have transformed their operations with our platform</p>
</div>
<dl class="mt-16 grid grid-cols-1 gap-8 sm:mt-20 sm:grid-cols-2 lg:grid-cols-4">
<div class="flex flex-col items-center gap-y-3 border border-gray-200 rounded-lg p-8 shadow-sm hover:shadow-md transition-shadow">
<dt class="text-base leading-7 text-gray-600">Active Users</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">100K+</dd>
<div class="text-sm text-gray-500">↑ 24% from last year</div>
</div>
<div class="flex flex-col items-center gap-y-3 border border-gray-200 rounded-lg p-8 shadow-sm hover:shadow-md transition-shadow">
<dt class="text-base leading-7 text-gray-600">Data Processed</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">500TB</dd>
<div class="text-sm text-gray-500">Daily average</div>
</div>
<div class="flex flex-col items-center gap-y-3 border border-gray-200 rounded-lg p-8 shadow-sm hover:shadow-md transition-shadow">
<dt class="text-base leading-7 text-gray-600">Customer Rating</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">4.9/5</dd>
<div class="text-sm text-gray-500">Based on 10K+ reviews</div>
</div>
<div class="flex flex-col items-center gap-y-3 border border-gray-200 rounded-lg p-8 shadow-sm hover:shadow-md transition-shadow">
<dt class="text-base leading-7 text-gray-600">Global Reach</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">150+</dd>
<div class="text-sm text-gray-500">Countries served</div>
</div>
</dl>
<div class="mt-16 flex justify-center">
<a href="#" class="inline-flex items-center gap-x-2 rounded-md bg-white px-6 py-3 text-base font-semibold text-gray-900 border border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" aria-label="View detailed analytics">
View detailed analytics
<svg class="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 class="mt-16 pt-8 border-t border-gray-200">
<div class="grid grid-cols-2 gap-8 md:grid-cols-6 lg:grid-cols-7">
<!-- Dropbox logo -->
<img class="col-span-1 h-8 w-full object-contain grayscale opacity-75" src="https://landinggo.com/assets/img/stock/logo-cloud/dropbox-logo-200x39.webp" alt="Dropbox" width="200" height="39">
<!-- Google logo -->
<img class="col-span-1 h-8 w-full object-contain grayscale opacity-75" src="https://landinggo.com/assets/img/stock/logo-cloud/google-logo-200x83.webp" alt="Google" width="200" height="83">
<!-- Notion logo -->
<img class="col-span-1 h-8 w-full object-contain grayscale opacity-75" src="https://landinggo.com/assets/img/stock/logo-cloud/notion-logo-200x70.webp" alt="Notion" width="200" height="70">
<!-- Product Hunt logo -->
<img class="col-span-1 h-8 w-full object-contain grayscale opacity-75" src="https://landinggo.com/assets/img/stock/logo-cloud/product-hunt-logo-200x72.webp" alt="Product Hunt" width="200" height="72">
<!-- Shopify logo -->
<img class="col-span-1 h-8 w-full object-contain grayscale opacity-75" src="https://landinggo.com/assets/img/stock/logo-cloud/shopify-logo-200x63.webp" alt="Shopify" width="200" height="63">
<!-- Slack logo -->
<img class="col-span-1 h-8 w-full object-contain grayscale opacity-75" src="https://landinggo.com/assets/img/stock/logo-cloud/slack-logo-200x51.webp" alt="Slack" width="200" height="51">
<!-- Stripe logo -->
<img class="col-span-1 h-8 w-full object-contain grayscale opacity-75" src="https://landinggo.com/assets/img/stock/logo-cloud/stripe-logo-200x93.webp" alt="Stripe" width="200" height="93">
</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