Home
Carlos
Showcase Impactfull stats

Showcase Impactfull stats

stats cards with icons

This tailwind example is contributed by Carlos, on 21-Oct-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Info, Show info, Statistics

Stats

Author Carlos

1.1k

Fork Fullscreen

<div class="text-gray-900 pt-16 pb-24 px-6 w-full bg-gray-50">
  <div class="max-w-7xl mx-auto text-center">
    <h2 class="text-4xl font-bold mb-6 text-gray-800">Our Impact </h2>
    <p class="text-lg text-gray-600 mb-16">Join thousands who trust our platform </p>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
      
      <div class="flex flex-col items-center p-8 bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow">
        <div
          class="mb-6 flex items-center justify-center w-28 h-28 rounded-full bg-gradient-to-r from-purple-500 to-pink-400 p-1">
          <div class="w-full h-full rounded-full bg-white flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-12 h-12 text-gray-900"
              viewBox="0 0 24 24">
              <path
                d="M12 5.5A3.5 3.5 0 0 1 15.5 9a3.5 3.5 0 0 1-3.5 3.5A3.5 3.5 0 0 1 8.5 9A3.5 3.5 0 0 1 12 5.5M5 8c.56 0 1.08.15 1.53.42c-.15 1.43.27 2.85 1.13 3.96C7.16 13.34 6.16 14 5 14a3 3 0 0 1-3-3a3 3 0 0 1 3-3m14 0a3 3 0 0 1 3 3a3 3 0 0 1-3 3c-1.16 0-2.16-.66-2.66-1.62a5.54 5.54 0 0 0 1.13-3.96c.45-.27.97-.42 1.53-.42M5.5 18.25c0-2.07 2.91-3.75 6.5-3.75s6.5 1.68 6.5 3.75V20h-13zM0 20v-1.5c0-1.39 1.89-2.56 4.45-2.9c-.59.68-.95 1.62-.95 2.65V20zm24 0h-3.5v-1.75c0-1.03-.36-1.97-.95-2.65c2.56.34 4.45 1.51 4.45 2.9z">
              </path>
            </svg>
          </div>
        </div>
        <div class="text-3xl font-extrabold text-gray-800">70,680 +</div>
        <div class="text-gray-500">Users</div>
      </div>
      
      <div class="flex flex-col items-center p-8 bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow">
        <div
          class="mb-6 flex items-center justify-center w-28 h-28 rounded-full bg-gradient-to-r from-purple-500 to-pink-400 p-1">
          <div class="w-full h-full rounded-full bg-white flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-12 h-12 text-gray-900"
              viewBox="0 0 24 24">
              <path
                d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm0 2h7v5h5v11H6zm2 8v2h8v-2zm0 4v2h5v-2z">
              </path>
            </svg>
          </div>
        </div>
        <div class="text-3xl font-extrabold text-gray-800">651,589 +</div>
        <div class="text-gray-500">Papers and Documents Processed</div>
      </div>
      
      <div class="flex flex-col items-center p-8 bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow">
        <div
          class="mb-6 flex items-center justify-center w-28 h-28 rounded-full bg-gradient-to-r from-purple-500 to-pink-400 p-1">
          <div class="w-full h-full rounded-full bg-white flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-12 h-12 text-gray-900"
              viewBox="0 0 24 24">
              <path
                d="M17.9 17.39c-.26-.8-1.01-1.39-1.9-1.39h-1v-3a1 1 0 0 0-1-1H8v-2h2a1 1 0 0 0 1-1V7h2a2 2 0 0 0 2-2v-.41a7.984 7.984 0 0 1 2.9 12.8M11 19.93c-3.95-.49-7-3.85-7-7.93c0-.62.08-1.22.21-1.79L9 15v1a2 2 0 0 0 2 2m1-16A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2">
              </path>
            </svg>
          </div>
        </div>
        <div class="text-3xl font-extrabold text-gray-800">50 +</div>
        <div class="text-gray-500">Languages Supported</div>
      </div>
    </div>
  </div>
</div>

Related Examples

Feature overview cards
The component is designed to be responsive, featuring a title, a brief description, and a set of cards presenting key metrics.

Author:
Nikita

1 year ago

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

Author:
Mereani Waqa

1 year ago

7.2k
Stats Section Dark

Author:
Santiago Hernandez

1 year ago

1.5k
Info card for admin panal
Show stats on your dashboard

Author:
Arya

3 years ago

12.6k
Stats Showcase Section
Display key metrics of your product or service beautifully

Author:
Mereani Waqa

1 year ago

5.5k
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

9 months ago

1k
stepper
The Stepper Component is a versatile and user-friendly tool designed to guide users through a sequence of steps. Whether you're building a multi-step form, a tutorial, or any process that requires sequential navigation, this component makes it easy to implement and customize.

Author:
Abhiraj

6 months ago

1.1k
Statastics cards

Author:
Shakti

2 years ago

14.3k
Tailwind stat cards
Highlight key statistics

Author:
Anonymous

1 year ago

9.8k
Stats - Htmlwind
Simple stats

Author:
Htmlwind

2 months ago

256
Info Card

Author:
Prem..

2 years ago

18.9k
Info cards for admin panel

Author:
Sophia Baker

2 years ago

11.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components