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

Big stat card
Display your statistics boldly

Author:
Nikita

1 year ago

3.4k
Responsive Features Section

Author:
Abdul Baset Bappy

2 months ago

489
Stats Section Dark

Author:
Santiago Hernandez

1 year ago

1.7k
ExtraLarge stats section

Author:
Manon Daniel

2 years ago

13.4k
Info cards for admin panal

Author:
Sophia Baker

2 years ago

9.4k
Calender
Calendar component for showing schedule

Author:
Brandon D

3 years ago

7.9k
Responsive Info cards for admin panel
Show stats to the admin dashboard

Author:
Santos78

2 years ago

11.7k
How does it work?

Author:
Abdul Baset Bappy

2 months ago

282
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

1 year ago

8.4k
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

2 years ago

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

Author:
Pixel Perfect

1 year ago

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

7 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components