Stats Components

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Stats from Saturn

Tailwind CSS

Saturn

<section class="pt-20 md:pt-32">
  <div class="container px-4 mx-auto">
    <div class="max-w-7xl mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/2 xl:w-2/5 px-4 mb-16 lg:mb-0">
          <div class="max-w-lg mx-auto lg:mx-0">
            <span class="inline-block py-1 px-3 mb-5 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">👋 MEET SATURN UI LIBRARY</span>
            <h1 class="font-heading text-4xl xs:text-6xl md:text-7xl font-bold mb-5">
              <span>Manage your</span>
              <span class="font-serif italic">products</span>
              <span>with saturn</span>
            </h1>
            <p class="text-xl text-gray-500 font-semibold">Nisi eu pellentesque felis volutpat aliquet pulvinar sed. Vitae fames vestibulum urna vel odio mauris urna orci est.</p>
          </div>
        </div>
        <div class="w-full lg:w-1/2 xl:w-3/5 px-4">
          <img class="block max-w-4xl mx-auto lg:max-w-none lg:mt-20 xl:mt-0 w-full" src="saturn-assets/images/stats/image-stat1.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Split-screen hero with product headline and stat cards

A marketing hero section introducing the Saturn UI Library, with a badge, large serif-italic headline, and supporting paragraph on the left. The right side shows a gradient abstract image overlaid with an earnings card and a stats card showing downloads and deals, illustrating the product.

Stats generator

Stats from Saturn

Bootstrap

Saturn

<section class="py-12 py-lg-24 position-relative overflow-hidden">
  <div class="container">
    <div class="mw-lg mx-auto mw-lg-none">
      <div class="row align-items-center">
        <div class="col-lg-6 mb-12">
          <div class="mw-lg">
            <span class="badge bg-primary-light px-3 py-2 text-primary mb-8">👋 MEET SATURN UI LIBRARY</span>
            <h2 class="font-heading mb-4">
              <span>Manage your</span>
              <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">products</span>
              <span>with saturn</span>
            </h2>
            <p class="mw-md lead text-secondary mb-0">Nisi eu pellentesque felis volutpat aliquet pulvinar sed. Vitae fames vestibulum urna vel odio mauris urna orci est.</p>
          </div>
        </div>
        <div class="col-lg-6">
          <img class="img-fluid d-block mb-lg-n20" src="saturn-assets/images/stats/image-stat1.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Stats from DarkPro

Tailwind CSS

DarkPro

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
        <div class="container px-4 mx-auto">
            <div class="flex flex-wrap items-center -mx-4 -mb-8">
                <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
                    <svg class="mx-auto mb-4 text-white w-12 h-12" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="currentColor"></path>
                        <circle cx="24" cy="24" r="23.5" stroke="currentColor"></circle>
                    </svg>
                    <h3 class="mb-1 text-xl md:text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-500 via-gray-100 to-gray-500">600 000 000</h3>
                    <p class="text-lg text-neutral-300">Dolor sit amet consectutar</p>
                </div>
                <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
                    <svg class="mx-auto mb-4 text-white w-12 h-12" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="currentColor"></path>
                        <circle cx="24" cy="24" r="23.5" stroke="currentColor"></circle>
                    </svg>
                    <h3 class="mb-1 text-xl md:text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-500 via-gray-100 to-gray-500">600 000 000</h3>
                    <p class="text-lg text-neutral-300">Dolor sit amet consectutar</p>
                </div>
                <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
                    <svg class="mx-auto mb-4 text-white w-12 h-12" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="currentColor"></path>
                        <circle cx="24" cy="24" r="23.5" stroke="currentColor"></circle>
                    </svg>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Four-column dark stats row with circular icons

A dark-themed horizontal row of four stat items, each with a circular outlined icon, a large numeric value, and a short caption. Items are evenly spaced and centered, with no visible buttons or interactive controls.

Stats generator

Stats from Flaro

Tailwind CSS

Flaro

<section class="relative pt-28 pb-36 bg-blueGray-50 overflow-hidden">
  <img class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" src="flaro-assets/images/team/gradient.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <h2 class="mb-5 text-6xl md:text-7xl font-bold font-heading text-center tracking-px-n leading-tight">Unlock startup’s true potential</h2>
    <p class="mb-16 text-lg text-gray-600 text-center font-medium leading-normal md:max-w-2xl mx-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra.</p>
    <div class="md:max-w-2xl mx-auto bg-white rounded-4xl shadow-8xl">
      <div class="flex flex-wrap justify-center items-center">
        <div class="w-full md:flex-1">
          <div class="text-center p-8 md:px-16 md:pt-9 md:pb-11">
            <p class="mb-4 text-indigo-600 font-semibold leading-normal">Monthly Users</p>
            <h2 class="mb-4 text-6xl md:text-8xl xl:text-10xl font-bold font-heading tracking-px-n leading-none">49,020</h2>
            <p class="text-gray-900 font-medium leading-snug">19% better than last month</p>
          </div>
        </div>
        <div class="w-auto">
          <div class="h-px w-14 md:w-px md:h-14 bg-gray-200"></div>
        </div>
        <div class="w-full md:flex-1">
          <div class="text-center p-8 md:px-16 md:pt-9 md:pb-11">
            <p class="mb-4 text-indigo-600 font-semibold leading-normal">Active Users</p>
            <h2 class="mb-4 text-6xl md:text-8xl xl:text-10xl font-bold font-heading tracking-px-n leading-none">2,530</h2>
            <p class="text-gray-900 font-medium leading-snug">33% better than last month</p>
          </div>
        </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Centered Hero with Two-Metric Stats Card

A centered hero section with a bold heading, supporting paragraph, and a white stats card showing two metrics (Monthly Users and Active Users) with their growth percentages. The layout is a vertically stacked, light-themed marketing block with a subtle shadow on the card.

Stats generator

Stats from Flaro

Bulma

Flaro

<section class="has-background-light py-24 is-clipped">
    <div class="container px-8">
        <h2 class="mb-5 has-text-weight-bold has-text-centered title is-size-1">Unlock startup’s true potential</h2>
        <p class="mb-16 has-text-grey has-text-centered has-text-weight-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra.</p>
        <div class="has-background-white box" style="border-radius: 30px;">
            <div class="is-flex is-flex-wrap-wrap is-justify-content-center is-align-items-center">
                <div class="has-text-centered p-8">
                    <p class="mb-4 has-text-link has-text-weight-semibold">Monthly Users</p>
                    <h2 class="mb-4 has-text-weight-bold has-text-dark is-size-2">49,020</h2>
                    <p class="has-text-dark has-text-weight-medium">19% better than last month</p>
                </div>
                <div class="is-hidden-mobile" style="height: 56px; width: 1px; background-color: #d8d5d5;"></div>
                <div class="has-text-centered p-8">
                    <p class="mb-4 has-text-link has-text-weight-semibold">Active Users</p>
                    <h2 class="mb-4 has-text-weight-bold has-text-dark is-size-2">2,530</h2>
                    <p class="has-text-dark has-text-weight-medium">33% better than last month</p>
                </div>
            </div>
        </div>
    </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Stats from Flaro

Bootstrap

Flaro

<section class="py-12 py-sm-24 py-md-32 bg-info-light">
  <div class="container">
    <div class="mw-3xl mx-auto text-center">
      <h3 class="mb-5" >Unlock startup&rsquo;s true potential</h3>
      <p class="mw-2xl mx-auto mb-16 fs-7 text-secondary" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra.</p>
      <div class="mw-sm mw-md-none mx-auto py-10 bg-white rounded-5 shadow-lg">
        <div class="row position-relative">
          <div class="d-none d-md-block p-0 bg-secondary-light opacity-50 position-absolute top-50 start-50 translate-middle" style="width: 1px; height: 56px;"></div>
          <div class="col-12 col-md-6">
            <div><span class="fw-bold text-primary" >Monthly Users</span>
              <h6 class="h2 mt-4 mb-4" >49,020</h6><span class="fs-9 text-secondary-dark" >19% better than last month</span>
            </div>
          </div>
          <div class="col-12 d-md-none py-12">
            <div class="mx-auto bg-secondary-light opacity-50" style="height: 1px; width: 56px;"></div>
          </div>
          <div class="col-12 col-md-6">
            <div><span class="fw-bold text-primary" >Active Users</span>
              <h6 class="h2 mt-4 mb-4" >2,530</h6><span class="fs-9 text-secondary-dark" >33% better than last month</span>
            </div>
          </div>
        </div>
      </div>
    </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Stats from Gradia

Tailwind CSS

Gradia

<section class="py-28 bg-gray-50 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/3 p-8">
        <p class="text-3xl sm:text-4xl xl:text-5xl text-gray-900"><span >More than </span><span class="font-heading font-bold text-transparent bg-clip-text bg-gradient-orange" >16,200 </span><span > visitor to customer converted</span></p>
      </div>
      <div class="w-full md:w-1/3 p-8">
        <p class="text-3xl sm:text-4xl xl:text-5xl overflow-hidden text-gray-900"><span >Increased </span><span class="font-heading font-bold text-transparent bg-clip-text bg-gradient-purple" >117% </span><span > conversions from the first quater</span></p>
      </div>
      <div class="w-full md:w-1/3 p-8">
        <p class="text-3xl sm:text-4xl xl:text-5xl text-gray-900"><span >Over </span><span class="font-heading font-bold text-transparent bg-clip-text bg-gradient-blue" >82% </span><span > increament on demo call bookings &amp; growth</span></p>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Three-column statistics row with gradient highlighted metrics

A light-background horizontal row of three short statistic statements, each pairing a sentence with a gradient-colored percentage or count to emphasize key results. It functions as a stats or proof-point section without images, buttons, or cards.

Stats generator

Stats from Gradia

Bootstrap

Gradia

<section class="py-28 bg-white overflow-hidden">
  <div class="container">
    <div class="row g-16 g-md-24">
      <div class="col-12 col-md-4">
        <div class="fs-12 mb-0 lh-sm"><span >More than </span>
          <h3 class="d-inline-block mb-0" style="background: linear-gradient(98.24deg, #FFB36D 0%, #EC5353 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">16,200</h3><span > visitor to customer converted</span>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="fs-12 mb-0 lh-sm"><span >Increased  </span>
          <h3 class="d-inline-block mb-0" style="background: linear-gradient(98.24deg, #6C2DD1 0%, #FF7DBC 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">117%</h3><span > conversions from the first quater</span>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="fs-12 mb-0 lh-sm"><span >Over  </span>
          <h3 class="d-inline-block mb-0" style="background: linear-gradient(98.24deg, #56C1E3 0%, #5B6AF0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">82%</h3><span > increament on demo call bookings &amp; growth</span>
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Stats from Solstice

Tailwind CSS

Solstice

<section class="py-24">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 p-4">
        <div class="bg-orange-500 h-1 mb-10"></div>
        <h2 class="text-4xl font-bold font-heading mb-3">101K+</h2>
        <p class="text-gray-500">Users studying around the globe</p>
      </div>
      <div class="w-full lg:w-1/3 p-4">
        <div class="bg-orange-500 h-1 mb-10"></div>
        <h2 class="text-4xl font-bold font-heading mb-3">352K</h2>
        <p class="text-gray-500">Registered Users</p>
      </div>
      <div class="w-full lg:w-1/3 p-4">
        <div class="bg-orange-500 h-1 mb-10"></div>
        <h2 class="text-4xl font-bold font-heading mb-3">94K</h2>
        <p class="text-gray-500">Registered Users</p>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Three-column statistics row with orange accent bars

A horizontal row of three statistic blocks, each with an orange top rule, a large bold numeric value, and a small gray caption beneath. Used to display key metrics such as user counts on a light background with minimal styling.

Stats generator

Stats from Solstice

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24">
  <div class="container">
    <div class="mw-md mw-md-none mx-auto">
      <div class="row">
        <div class="col-12 col-md-4 mb-10 mb-md-0">
          <div class="pt-10 border-3 border-top border-primary">
            <h4 class="mb-1">101K+</h4>
            <p class="text-light-dark mb-0">Users studying around the globe</p>
          </div>
        </div>
        <div class="col-12 col-md-4 mb-10 mb-md-0">
          <div class="pt-10 border-3 border-top border-primary">
            <h4 class="mb-1">352K+</h4>
            <p class="text-light-dark mb-0">Registered Users</p>
          </div>
        </div>
        <div class="col-12 col-md-4 mb-10 mb-md-0">
          <div class="pt-10 border-3 border-top border-primary">
            <h4 class="mb-1">94K+</h4>
            <p class="text-light-dark mb-0">Registered Users</p>
          </div>
        </div>
      </div>
    </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Stats from Basko

Tailwind CSS

Basko

<section class="py-24 lg:py-32 bg-black overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap lg:items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <img class="mx-auto rounded-lg transform hover:-translate-y-1 transition duration-500" src="basko-assets/images/facts/media.jpg" alt="">
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-md">
          <h2 class="font-heading mb-24 text-6xl text-white tracking-tighter leading-tight">Showcase some impressive numbers.</h2>
          <div class="mb-8">
            <h3 class="font-heading mb-3 inline-block text-6xl md:text-7xl tracking-tighter" style="background: linear-gradient(86deg, rgba(186,109,238,1) 0%, rgba(252,202,89,1) 100%, rgba(252,202,89,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">55%</h3>
            <p class="text-xl text-gray-200 tracking-tight">A percentage number that suggests an increase in performance.</p>
          </div>
          <div>
            <h3 class="font-heading mb-3 inline-block text-6xl md:text-7xl tracking-tighter" style="background: linear-gradient(86deg, rgba(186,109,238,1) 0%, rgba(252,202,89,1) 100%, rgba(252,202,89,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">43%</h3>
            <p class="text-xl text-gray-200 tracking-tight">Another percentage that could suggest internet rates etc..</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Split-Screen Statistics Feature Section with Photo and Gradient Numbers

A dark-background marketing section with a serif heading and two large gradient statistic figures (55% and 43%) beside a vertical photo with a pink-to-purple gradient overlay. The two-column split layout pairs the image on the left with the heading and stats on the right.

Stats generator

Stats from Basko

Bootstrap

Basko

<section class="py-12 py-lg-24 bg-dark">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-6 mt-12 mt-lg-0 order-last order-lg-first">
        <div class="mw-md mx-auto mx-lg-0">
          <img class="img-fluid d-block rounded-3" src="basko-assets/images/facts/media.jpg" alt="">
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <div class="mw-md mx-auto me-lg-0">
          <h2 class="text-white mb-24">Showcase some impressive numbers.</h2>
          <div class="mb-8">
            <h1 class="fw-normal mb-3" style="letter-spacing: -2px; background-clip: text; -webkit-background-clip: text; color: transparent; background-image: url('basko-assets/images/gradient.png'); background-position: center; background-size: 45%;">55%</h1>
            <p class="text-white mb-0">A percentage number that suggests an increase in performance.</p>
          </div>
          <div>
            <h1 class="fw-normal mb-3" style="letter-spacing: -2px; background-clip: text; -webkit-background-clip: text; color: transparent; background-image: url('basko-assets/images/gradient.png'); background-position: center; background-size: 45%;">43%</h1>
            <p class="text-white mb-0">Another percentage that could suggest internet rates etc..</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Stats from Zanrly

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-800 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-dark-light w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-dark-light.png" alt="">
      </div>
      <div class="relative flex flex-wrap -m-4">
        <div class="w-full md:w-1/3 p-4">
          <div class="flex flex-col justify-end p-10 pt-20 lg:pt-40 bg-gray-900 h-full rounded-3xl">
            <h2 class="font-heading text-3xl text-gray-100 font-bold tracking-tight">
              <span>More than</span>
              <span class="text-4xl font-black text-transparent bg-clip-text bg-gradient-green">16,200</span>
              <span>visitor to customer converted</span>
            </h2>
          </div>
        </div>
        <div class="w-full md:w-1/3 p-4">
          <div class="flex flex-col justify-end p-10 pt-20 lg:pt-40 bg-gray-900 h-full rounded-3xl">
            <h2 class="font-heading text-3xl text-gray-100 font-bold tracking-tight">
              <span>Increased</span>
              <span class="text-4xl font-black text-transparent bg-clip-text bg-gradient-pink">117%</span>
              <span>conversions from the first quater</span>
            </h2>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Three-Card Stats Row with Highlighted Metrics

A horizontal row of three rounded dark cards on a dark textured background, each containing a short statement with a large highlighted metric (16,200, 117%, 82%) in teal, pink, and cyan. The cards appear to lack imagery in their upper areas, with text anchored to the lower half, suggesting a results or social proof section.

Stats generator

Stats from Nightsable

Tailwind CSS

Nightsable

<section class="py-16 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-11">
      <div class="relative w-full md:w-1/3 p-11">
        <div class="text-center">
          <h3 class="mb-1.5 text-7xl lg:text-8xl text-white tracking-4xl">$1.5B+</h3>
          <p class="text-gray-300">active listing wordlide</p>
        </div>
        <div class="hidden md:block absolute top-1/2 right-0 w-px h-24 bg-gray-900 transform -translate-y-1/2"></div>
      </div>
      <div class="relative w-full md:w-1/3 p-11">
        <div class="text-center">
          <h3 class="mb-1.5 text-7xl lg:text-8xl text-white tracking-4xl">100+</h3>
          <p class="text-gray-300">cities and towns with active Nightsable card</p>
        </div>
        <div class="hidden md:block absolute top-1/2 right-0 w-px h-24 bg-gray-900 transform -translate-y-1/2"></div>
      </div>
      <div class="w-full md:w-1/3 p-11">
        <div class="text-center">
          <h3 class="mb-1.5 text-7xl lg:text-8xl text-white tracking-4xl">75%</h3>
          <p class="text-gray-300">assets Under Managment</p>
        </div>
      </div>
    </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Stats Row with Three Large Metrics and Vertical Dividers

A horizontal row of three large white statistic figures ($1.5B+, 100+, 75%) on a near-black background, each with a small descriptive caption below and thin vertical dividers between them. It functions as a marketing social-proof section highlighting company scale.

Stats generator

Stats from Nightsable

Bootstrap

Nightsable

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container">
    <div class="mw-sm mx-auto mw-lg-none">
      <div class="row align-items-center">
        <div class="col-12 col-lg-4 pb-12 mb-12 pb-lg-0 mb-lg-0 position-relative">
          <div class="d-none d-lg-block position-absolute top-0 end-0 h-100 border-end border-dark border-opacity-50"></div>
          <div class="d-lg-none position-absolute bottom-0 end-0 w-100 border-bottom border-dark border-opacity-50"></div>
          <div class="mw-xs px-10 mx-auto">
            <h6 class="h2">$1.5B+</h6><span class="text-secondary-light">active listing wordlide</span>
          </div>
        </div>
        <div class="col-12 col-lg-4 pb-12 mb-12 pb-lg-0 mb-lg-0 position-relative">
          <div class="d-none d-lg-block position-absolute top-0 end-0 h-100 border-end border-dark border-opacity-50"></div>
          <div class="d-lg-none position-absolute bottom-0 end-0 w-100 border-bottom border-dark border-opacity-50"></div>
          <div class="mw-xs px-10 mx-auto">
            <h6 class="h2">100+</h6><span class="text-secondary-light">cities and towns with active Nightsable card</span>
          </div>
        </div>
        <div class="col-12 col-lg-4">
          <div class="mw-xs px-10 mx-auto">
            <h6 class="h2">75%</h6><span class="text-secondary-light">assets Under Managment</span>
          </div>
        </div>
      </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Stats from Zeus

Bulma

Zeus

<section class="section py-20">
  <div class="container">
    <div class="columns -mb-8">
      <div class="column is-3 mb-8 has-text-centered">
        <span class="is-flex is-align-items-center is-justify-content-center mb-8 mx-auto has-background-success" style="width: 56px; height: 56px; border-radius: 100%;">
          <svg width="18" height="21" viewbox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M8.98444 19.606C8.98444 19.606 16.6564 17.283 16.6564 10.879C16.6564 4.474 16.9344 3.974 16.3194 3.358C15.7034 2.742 9.99044 0.75 8.98444 0.75C7.97844 0.75 2.26544 2.742 1.65044 3.358C1.03444 3.974 1.31244 4.474 1.31244 10.879C1.31244 17.283 8.98444 19.606 8.98444 19.606Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M6.38586 9.87463L8.27786 11.7696L12.1759 7.86963" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
        <h4 class="mb-4 title is-4">600 000 000</h4>
        <p class="is-size-5 has-text-grey-dark">Dolor sit amet consectutar</p>
      </div>
      <div class="column is-3 mb-8 has-text-centered">
        <span class="is-flex is-align-items-center is-justify-content-center mb-8 mx-auto has-background-danger" style="width: 56px; height: 56px; border-radius: 100%;">
          <svg width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M18.0714 18.0699C15.0152 21.1263 10.4898 21.7867 6.78642 20.074C6.23971 19.8539 5.79148 19.676 5.36537 19.676C4.17849 19.683 2.70117 20.8339 1.93336 20.067C1.16555 19.2991 2.31726 17.8206 2.31726 16.6266C2.31726 16.2004 2.14642 15.7602 1.92632 15.2124C0.212831 11.5096 0.874109 6.98269 3.93026 3.92721C7.8316 0.0244319 14.17 0.0244322 18.0714 3.9262C21.9797 7.83501 21.9727 14.1681 18.0714 18.0699Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M14.9393 11.413H14.9483" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M10.9304 11.413H10.9394" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M6.9214 11.413H6.9304" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
        <h4 class="mb-4 title is-4">600 000 000</h4>
        <p class="is-size-5 has-text-grey-dark">Dolor sit amet consectutar</p>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Stats from Zeus

Tailwind CSS

Zeus

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4 -mb-8">
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
        <span class="flex items-center justify-center w-14 h-14 mb-8 mx-auto bg-teal-400 rounded-full">
          <svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M8.98444 19.606C8.98444 19.606 16.6564 17.283 16.6564 10.879C16.6564 4.474 16.9344 3.974 16.3194 3.358C15.7034 2.742 9.99044 0.75 8.98444 0.75C7.97844 0.75 2.26544 2.742 1.65044 3.358C1.03444 3.974 1.31244 4.474 1.31244 10.879C1.31244 17.283 8.98444 19.606 8.98444 19.606Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M6.38586 9.87463L8.27786 11.7696L12.1759 7.86963" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
        <h3 class="mb-4 text-2xl font-semibold font-heading">600 000 000</h3>
        <p class="text-xl text-gray-500">Dolor sit amet consectutar</p>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
        <span class="flex items-center justify-center w-14 h-14 mb-8 mx-auto bg-red-400 rounded-full">
          <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M18.0714 18.0699C15.0152 21.1263 10.4898 21.7867 6.78642 20.074C6.23971 19.8539 5.79148 19.676 5.36537 19.676C4.17849 19.683 2.70117 20.8339 1.93336 20.067C1.16555 19.2991 2.31726 17.8206 2.31726 16.6266C2.31726 16.2004 2.14642 15.7602 1.92632 15.2124C0.212831 11.5096 0.874109 6.98269 3.93026 3.92721C7.8316 0.0244319 14.17 0.0244322 18.0714 3.9262C21.9797 7.83501 21.9727 14.1681 18.0714 18.0699Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M14.9393 11.413H14.9483" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M10.9304 11.413H10.9394" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M6.9214 11.413H6.9304" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
        <h3 class="mb-4 text-2xl font-semibold font-heading">600 000 000</h3>
        <p class="text-xl text-gray-500">Dolor sit amet consectutar</p>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Four-column stats row with colored icon circles

A horizontal row of four equal columns, each with a colored circular icon above a bold numeric value and a gray supporting caption. The layout is a simple feature or statistics strip on a white background.

Stats generator

Stats from Zeus

Bootstrap

Zeus

<section class="py-20">
  <div class="container">
    <div class="row mb-n8">
      <div class="col-12 col-md-6 col-lg-3 mb-8 text-center"><span class="d-flex align-items-center justify-content-center mb-8 mx-auto bg-success rounded-circle" style="width: 56px; height: 56px;">
          <svg width="18" height="21" viewbox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M8.98444 19.606C8.98444 19.606 16.6564 17.283 16.6564 10.879C16.6564 4.474 16.9344 3.974 16.3194 3.358C15.7034 2.742 9.99044 0.75 8.98444 0.75C7.97844 0.75 2.26544 2.742 1.65044 3.358C1.03444 3.974 1.31244 4.474 1.31244 10.879C1.31244 17.283 8.98444 19.606 8.98444 19.606Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M6.38586 9.87463L8.27786 11.7696L12.1759 7.86963" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></span>
        <h4 class="mb-4">600 000 000</h4>
        <p class="lead text-muted">Dolor sit amet consectutar</p>
      </div>
      <div class="col-12 col-md-6 col-lg-3 mb-8 text-center"><span class="d-flex align-items-center justify-content-center mb-8 mx-auto bg-danger rounded-circle" style="width: 56px; height: 56px;">
          <svg width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M18.0714 18.0699C15.0152 21.1263 10.4898 21.7867 6.78642 20.074C6.23971 19.8539 5.79148 19.676 5.36537 19.676C4.17849 19.683 2.70117 20.8339 1.93336 20.067C1.16555 19.2991 2.31726 17.8206 2.31726 16.6266C2.31726 16.2004 2.14642 15.7602 1.92632 15.2124C0.212831 11.5096 0.874109 6.98269 3.93026 3.92721C7.8316 0.0244319 14.17 0.0244322 18.0714 3.9262C21.9797 7.83501 21.9727 14.1681 18.0714 18.0699Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M14.9393 11.413H14.9483" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M10.9304 11.413H10.9394" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M6.9214 11.413H6.9304" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></span>
        <h4 class="mb-4">600 000 000</h4>
        <p class="lead text-muted">Dolor sit amet consectutar</p>
      </div>
      <div class="col-12 col-md-6 col-lg-3 mb-8 text-center"><span class="d-flex align-items-center justify-content-center mb-8 mx-auto bg-warning rounded-circle" style="width: 56px; height: 56px;">
          <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.8325 6.17463L8.10904 11.9592L1.59944 7.88767C0.66675 7.30414 0.860765 5.88744 1.91572 5.57893L17.3712 1.05277C18.3373 0.769629 19.2326 1.67283 18.9456 2.642L14.3731 18.0868C14.0598 19.1432 12.6512 19.332 12.0732 18.3953L8.10601 11.9602" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Stats from Artemis Dashboard

Tailwind CSS

Artemis Dashboard

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="p-6 rounded bg-white">
          <div class="flex mb-2">
            <span class="inline-block mr-2">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.00013 0.666656C7.90578 0.666656 6.82215 0.882205 5.8111 1.30099C4.80006 1.71978 3.8814 2.33361 3.10758 3.10743C1.54477 4.67024 0.666799 6.78985 0.666799 8.99999C0.659514 10.9243 1.32579 12.7904 2.55013 14.275L0.883466 15.9417C0.767834 16.0588 0.689504 16.2077 0.658359 16.3693C0.627214 16.531 0.64465 16.6982 0.708466 16.85C0.777681 16.9999 0.889886 17.1259 1.03084 17.212C1.17179 17.298 1.33513 17.3403 1.50013 17.3333H9.00013C11.2103 17.3333 13.3299 16.4553 14.8927 14.8925C16.4555 13.3297 17.3335 11.2101 17.3335 8.99999C17.3335 6.78985 16.4555 4.67024 14.8927 3.10743C13.3299 1.54463 11.2103 0.666656 9.00013 0.666656ZM9.00013 15.6667H3.50847L4.28347 14.8917C4.43868 14.7355 4.52579 14.5243 4.52579 14.3042C4.52579 14.084 4.43868 13.8728 4.28347 13.7167C3.19229 12.6267 2.51278 11.1921 2.36071 9.65732C2.20864 8.12253 2.59342 6.58249 3.44949 5.29959C4.30556 4.01669 5.57996 3.07029 7.05556 2.62163C8.53117 2.17298 10.1167 2.24983 11.542 2.83908C12.9673 3.42834 14.1442 4.49355 14.8722 5.85323C15.6002 7.21291 15.8342 8.78294 15.5344 10.2958C15.2346 11.8087 14.4196 13.1709 13.2281 14.1502C12.0366 15.1295 10.5424 15.6654 9.00013 15.6667ZM13.1668 8.16666H4.83347C4.61245 8.16666 4.40049 8.25445 4.24421 8.41073C4.08793 8.56701 4.00013 8.77898 4.00013 8.99999C4.00013 9.221 4.08793 9.43296 4.24421 9.58924C4.40049 9.74553 4.61245 9.83332 4.83347 9.83332H13.1668C13.3878 9.83332 13.5998 9.74553 13.7561 9.58924C13.9123 9.43296 14.0001 9.221 14.0001 8.99999C14.0001 8.77898 13.9123 8.56701 13.7561 8.41073C13.5998 8.25445 13.3878 8.16666 13.1668 8.16666ZM11.5001 11.5H6.50013C6.27912 11.5 6.06716 11.5878 5.91088 11.7441C5.7546 11.9003 5.6668 12.1123 5.6668 12.3333C5.6668 12.5543 5.7546 12.7663 5.91088 12.9226C6.06716 13.0789 6.27912 13.1667 6.50013 13.1667H11.5001C11.7211 13.1667 11.9331 13.0789 12.0894 12.9226C12.2457 12.7663 12.3335 12.5543 12.3335 12.3333C12.3335 12.1123 12.2457 11.9003 12.0894 11.7441C11.9331 11.5878 11.7211 11.5 11.5001 11.5ZM6.50013 6.49999H11.5001C11.7211 6.49999 11.9331 6.41219 12.0894 6.25591C12.2457 6.09963 12.3335 5.88767 12.3335 5.66666C12.3335 5.44564 12.2457 5.23368 12.0894 5.0774C11.9331 4.92112 11.7211 4.83332 11.5001 4.83332H6.50013C6.27912 4.83332 6.06716 4.92112 5.91088 5.0774C5.7546 5.23368 5.6668 5.44564 5.6668 5.66666C5.6668 5.88767 5.7546 6.09963 5.91088 6.25591C6.06716 6.41219 6.27912 6.49999 6.50013 6.49999Z" fill="#382CDD"></path>
              </svg>
            </span>
            <h3 class="text-sm text-gray-600">Responses</h3>
            <span class="inline-block ml-auto px-2 py-1 text-xs text-gray-500 bg-gray-50 rounded-full">30 Days</span>
          </div>
          <h2 class="mb-2 text-3xl font-bold">1 450</h2>
          <span class="text-xs text-red-500">
            <span class="inline-block mr-2">
              <svg width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16.5 4.16667C16.3906 4.16661 16.2822 4.18812 16.181 4.22998C16.0799 4.27183 15.988 4.33322 15.9106 4.41061C15.8332 4.488 15.7719 4.57989 15.73 4.68103C15.6881 4.78216 15.6666 4.89055 15.6667 5V7.15495L10.4225 1.91084C10.3452 1.83344 10.2533 1.77204 10.1522 1.73015C10.0511 1.68825 9.94277 1.66669 9.83333 1.66669C9.7239 1.66669 9.61554 1.68825 9.51445 1.73015C9.41335 1.77204 9.3215 1.83344 9.24414 1.91084L6.50002 4.65495L2.08919 0.244171C1.93245 0.0902454 1.72127 0.00444584 1.50159 0.00544068C1.28191 0.00643553 1.07151 0.094144 0.91617 0.249483C0.760831 0.404822 0.673123 0.61522 0.672128 0.8349C0.671133 1.05458 0.756932 1.26576 0.910858 1.4225L5.91086 6.4225C5.98822 6.4999 6.08007 6.5613 6.18116 6.60319C6.28226 6.64508 6.39062 6.66665 6.50005 6.66665C6.60948 6.66665 6.71784 6.64508 6.81893 6.60319C6.92003 6.5613 7.01188 6.4999 7.08924 6.4225L9.83336 3.67839L14.4883 8.33334H12.3334C12.1123 8.33334 11.9004 8.42113 11.7441 8.57741C11.5878 8.7337 11.5 8.94566 11.5 9.16667C11.5 9.38768 11.5878 9.59965 11.7441 9.75593C11.9004 9.91221 12.1123 10 12.3334 10H16.5C16.6095 10.0001 16.7179 9.97855 16.819 9.9367C16.9201 9.89484 17.012 9.83346 17.0894 9.75607C17.1668 9.67867 17.2282 9.58678 17.2701 9.48565C17.3119 9.38452 17.3334 9.27612 17.3334 9.16667V5C17.3334 4.89055 17.3119 4.78216 17.2701 4.68103C17.2282 4.57989 17.1668 4.488 17.0894 4.41061C17.012 4.33322 16.9201 4.27183 16.819 4.22998C16.7179 4.18812 16.6095 4.16661 16.5 4.16667Z" fill="#E85444"></path>
              </svg>
            </span>
            <span>25% less</span>
          </span>
        </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Four-Up KPI Stat Card Row with 30-Day Trends

A horizontal row of four white metric cards on a pale blue background, each showing a labeled statistic (Responses, Projects, Reports, Users), a 30 Days badge, a large bold value, and a colored up or down trend indicator. The layout is a single row of equal-width cards for dashboard-style summary metrics.

Stats generator

Stats from Trizzle

Tailwind CSS

Trizzle

<section class="py-3">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap justify-center -m-4">
      <div class="w-full md:w-1/3 p-4">
        <div class="p-4 bg-gray-500 rounded-xl">
          <div class="flex flex-wrap items-center mb-6 -m-2">
            <div class="w-auto p-2 self-start">
              <div class="flex w-8 h-8 items-center justify-center bg-gray-600 rounded-xl">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7.3333 5.99996H9.99996C10.1768 5.99996 10.3463 5.92972 10.4714 5.8047C10.5964 5.67967 10.6666 5.5101 10.6666 5.33329C10.6666 5.15648 10.5964 4.98691 10.4714 4.86189C10.3463 4.73686 10.1768 4.66663 9.99996 4.66663H8.66663V3.99996C8.66663 3.82315 8.59639 3.65358 8.47137 3.52855C8.34634 3.40353 8.17677 3.33329 7.99996 3.33329C7.82315 3.33329 7.65358 3.40353 7.52856 3.52855C7.40353 3.65358 7.3333 3.82315 7.3333 3.99996V4.66663C6.80286 4.66663 6.29416 4.87734 5.91908 5.25241C5.54401 5.62748 5.3333 6.13619 5.3333 6.66663C5.3333 7.19706 5.54401 7.70577 5.91908 8.08084C6.29416 8.45591 6.80286 8.66663 7.3333 8.66663H8.66663C8.84344 8.66663 9.01301 8.73686 9.13803 8.86189C9.26306 8.98691 9.3333 9.15648 9.3333 9.33329C9.3333 9.5101 9.26306 9.67967 9.13803 9.8047C9.01301 9.92972 8.84344 9.99996 8.66663 9.99996H5.99996C5.82315 9.99996 5.65358 10.0702 5.52856 10.1952C5.40353 10.3202 5.3333 10.4898 5.3333 10.6666C5.3333 10.8434 5.40353 11.013 5.52856 11.138C5.65358 11.2631 5.82315 11.3333 5.99996 11.3333H7.3333V12C7.3333 12.1768 7.40353 12.3463 7.52856 12.4714C7.65358 12.5964 7.82315 12.6666 7.99996 12.6666C8.17677 12.6666 8.34634 12.5964 8.47137 12.4714C8.59639 12.3463 8.66663 12.1768 8.66663 12V11.3333C9.19706 11.3333 9.70577 11.1226 10.0808 10.7475C10.4559 10.3724 10.6666 9.86372 10.6666 9.33329C10.6666 8.80286 10.4559 8.29415 10.0808 7.91908C9.70577 7.54401 9.19706 7.33329 8.66663 7.33329H7.3333C7.15649 7.33329 6.98692 7.26305 6.86189 7.13803C6.73687 7.01301 6.66663 6.84344 6.66663 6.66663C6.66663 6.48981 6.73687 6.32025 6.86189 6.19522C6.98692 6.0702 7.15649 5.99996 7.3333 5.99996ZM7.99996 0.666626C6.54957 0.666626 5.13174 1.09672 3.92578 1.90252C2.71982 2.70831 1.77989 3.85362 1.22485 5.19361C0.669803 6.53361 0.524579 8.00809 0.807537 9.43062C1.0905 10.8531 1.78893 12.1598 2.81451 13.1854C3.8401 14.211 5.14677 14.9094 6.5693 15.1924C7.99183 15.4753 9.46632 15.3301 10.8063 14.7751C12.1463 14.22 13.2916 13.2801 14.0974 12.0741C14.9032 10.8682 15.3333 9.45036 15.3333 7.99996C15.3333 6.05504 14.5607 4.18978 13.1854 2.81451C11.8101 1.43924 9.94488 0.666626 7.99996 0.666626ZM7.99996 14C6.81327 14 5.65324 13.6481 4.66654 12.9888C3.67985 12.3295 2.91081 11.3924 2.45669 10.2961C2.00256 9.1997 1.88374 7.9933 2.11525 6.82942C2.34676 5.66553 2.91821 4.59643 3.75732 3.75732C4.59644 2.9182 5.66553 2.34676 6.82942 2.11525C7.99331 1.88374 9.19971 2.00256 10.2961 2.45668C11.3924 2.91081 12.3295 3.67984 12.9888 4.66654C13.6481 5.65323 14 6.81327 14 7.99996C14 9.59126 13.3678 11.1174 12.2426 12.2426C11.1174 13.3678 9.59126 14 7.99996 14Z" fill="#194BFB"></path>
                </svg>
              </div>
            </div>
            <div class="w-auto p-2">
              <h5 class="text-xs leading-tight font-medium text-gray-300">Main account</h5>
              <h4 class="leading-6 text-gray-100 font-semibold">$16,045.00</h4>
            </div>
          </div>
          <div class="flex items-end -mx-2">
            <div class="w-1/5 px-2">
              <div class="group relative h-8 w-6 bg-gray-600 hover:bg-blue-500 rounded-t-md">
                <div class="hidden group-hover:block absolute z-10 bottom-full left-full w-40 px-4 py-2 bg-gray-700 rounded-lg">
                  <span class="text-xs text-gray-200">Lorem ipsum 200 dolor, sit amet elit.</span>
                  <div class="absolute bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2 w-2 h-2 bg-gray-100 rounded-full"></div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Account Balance Summary Cards

A row of three dark-themed cards showing account names, balances, and small decorative bar charts with blue icons. The cards are arranged horizontally and display Main account, Taxes, and Savings balances for a finance dashboard.

Stats generator