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

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

5 months ago

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

Author:
Mereani Waqa

1 year ago

5.2k
Tailwind stat cards
Highlight key statistics

Author:
Anonymous

1 year ago

9.7k
Information card

Author:
Samuel Dawson

2 years ago

11.6k
How does it work?

Author:
Abdul Baset Bappy

5 days ago

9
Statastics cards

Author:
Shakti

2 years ago

14.2k
Stats cards for admin panel
This Component is designed to present statistics in a tile format. It comprises a title, a large numeric value, and an icon, creating an eye-catching way to display data.

Author:
Prajwal Hallale

1 year ago

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

4 months ago

954
Big stat card
Display your statistics boldly

Author:
Nikita

1 year ago

3.2k
Info cards

Author:
Lukas Müller

2 years ago

11k
Info cards for admin panel

Author:
Sophia Baker

2 years ago

11.2k
Stats Section Dark

Author:
Santiago Hernandez

1 year ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components