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

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

Stats card with icons
Improved Code quality and added support for dark mode

Author:
Dika Rahman

1 year ago

1.5k
Responsive Card Grid with hover animation

Author:
Prashant

3 years ago

19.2k
Progress Bar
A progress bar is a UI element that visually represents the completion status of a task or process. It helps users understand how much of a task has been completed and how much remains. Commonly used in forms, file uploads, loading screens, or multi-step processes, it enhances the user experience by providing clear feedback.

Author:
Abhiraj

9 months ago

827
Semi transparent Info card

Author:
Prajwal Hallale

2 years ago

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

11 months ago

1.1k
Stats Section
The gradient background stats section uses dark shades of gradient change colors according to your website theme

Author:
Santiago Hernandez

1 year ago

2.5k
Block Group kpis

Author:
Ranit Saha

9 months ago

523
How does it work?

Author:
Abdul Baset Bappy

3 months ago

310
Calender
Calendar component for showing schedule

Author:
Brandon D

3 years ago

7.9k
Stats - Big and Bold
display stats of your product

Author:
Pixel Perfect

1 year ago

1.4k
Stats Banner Example
Show your stats proudly

Author:
Nomusa Botha

1 year ago

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

Author:
Arya

3 years ago

12.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components