Home
Anonymous
Tailwind stat cards

Tailwind stat cards

Highlight key statistics

This tailwind example is contributed by Anonymous, on 12-Aug-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Info, Show info, Statistics

Stats

Author Anonymous

10.3k

Fork Fullscreen

<div class="bg-gray-900 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 space-y-4">
        <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">Trusted by creators worldwide</h2>
        <p class="text-lg leading-8 text-gray-300">We can help you grow your audience and your business, no matter the
          size.
        </p>
      </div>
      <dl class="mt-16 grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
        <div class="flex flex-col bg-white/5 p-8">
          <dt class="text-sm font-semibold leading-6 text-gray-300">words written in 2023</dt>
          <dd class="order-first text-3xl font-semibold tracking-tight text-white">12 million</dd>
        </div>
        <div class="flex flex-col bg-white/5 p-8">
          <dt class="text-sm font-semibold leading-6 text-gray-300">episodes uploaded</dt>
          <dd class="order-first text-3xl font-semibold tracking-tight text-white">10k</dd>
        </div>
        <div class="flex flex-col bg-white/5 p-8">
          <dt class="text-sm font-semibold leading-6 text-gray-300">hours of media</dt>
          <dd class="order-first text-3xl font-semibold tracking-tight text-white">6.6k</dd>
        </div>
        <div class="flex flex-col bg-white/5 p-8">
          <dt class="text-sm font-semibold leading-6 text-gray-300">answers</dt>
          <dd class="order-first text-3xl font-semibold tracking-tight text-white">2.1k</dd>
        </div>
      </dl>
    </div>
  </div>
</div>

Related Examples

Statistics card section

Author:
Laurits

3 years ago

17.6k
How does it work Steps example
Dark themed steps section

Author:
Mereani Waqa

2 years ago

7.9k
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

2 years ago

10.5k
Stats section with animated counter
Display important stats of your product

Author:
Dipti narayan

2 years ago

11.1k
Info cards for admin panel
Display various Infos and statatics in admin panel with these cards

Author:
Arya

3 years ago

12.1k
Weather info Card
Inspired from Mamba UI

Author:
Ron Hicks

3 years ago

12k
Basic stat cards

Author:
Santos78

2 years ago

11.3k
Info cards grid with icons
Evenly-sized cards for showing various stats on the user/admin dashboard.

Author:
Prajwal Hallale

2 years ago

7.9k
Stats or Metrics Overview
Highlight your achievements with our Stats Section, featuring key metrics such as years of experience, happy clients, completed projects, and awards. This visually engaging component effectively communicates your expertise and success at a glance

Author:
Anum Shahana

1 year ago

1.3k
Showcase Impactfull stats
stats cards with icons

Author:
Carlos

1 year ago

1.5k
Info cards

Author:
Lukas Müller

2 years ago

11.6k
Metrics overview cards
stat cards

Author:
Quentin Rivers

1 year ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components