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.6k

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

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

Author:
Mereani Waqa

2 years ago

8k
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

3 years ago

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

Author:
Dipti narayan

2 years ago

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

Author:
Arya

3 years ago

12.4k
Weather info Card
Inspired from Mamba UI

Author:
Ron Hicks

3 years ago

12.1k
Basic stat cards

Author:
Santos78

2 years ago

11.7k
Data Metrics Showcase
An information panel designed to instill trust, presenting vital statistics about a service or product. The grid layout offers a clean and organized look for displaying key data.

Author:
Hyun-woo Cho

2 years ago

8.7k
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.4k
Stats card with icons
Improved Code quality and added support for dark mode

Author:
Dika Rahman

1 year ago

1.8k
Info cards for admin panel

Author:
Sophia Baker

3 years ago

12.1k
Responsive Card Grid with hover animation

Author:
Prashant

3 years ago

19.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components