Project stats section

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

Stats

Author Carlos

Tailwind v3.4 2.4k 6

Fork Fullscreen

<div class="p-4 md:p-6">
  <div class="border border-gray-200 bg-white rounded-3xl flex flex-wrap">
    <div class="w-full md:w-1/2 lg:w-1/4 py-8">
      <div class="md:border-r border-gray-200 px-12">
        <p class="text-gray-600 mb-2 text-center">Projects</p>
        <h2 class="text-4xl lg:text-5xl font-semibold text-center">150+</h2>
      </div>
    </div>
    <div class="w-full md:w-1/2 lg:w-1/4 py-8">
      <div class="lg:border-r border-gray-200 px-12">
        <p class="text-gray-600 mb-2 text-center">Users</p>
        <h2 class="text-4xl lg:text-5xl font-semibold text-center">10K+</h2>
      </div>
    </div>
    <div class="w-full md:w-1/2 lg:w-1/4 py-8">
      <div class="md:border-r border-gray-200 px-12">
        <p class="text-gray-600 mb-2 text-center">Countries</p>
        <h2 class="text-4xl lg:text-5xl font-semibold text-center">50+</h2>
      </div>
    </div>
    <div class="w-full md:w-1/2 lg:w-1/4 py-8">
      <div class="px-12">
        <p class="text-gray-600 mb-2 text-center">Partners</p>
        <h2 class="text-4xl lg:text-5xl font-semibold text-center">30+</h2>
      </div>
    </div>
  </div>
</div>

Related Examples

Basic stat cards

Santos78

3 years ago

12.5k
Information card

Samuel Dawson

3 years ago

12.8k
Calender
Calendar component for showing schedule

Brandon D

4 years ago

8.9k
Beautiful info cards
Responsive and minimal design

Amit Pachange

3 years ago

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

Hyun-woo Cho

3 years ago

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

Arya

4 years ago

12.7k
Info cards for admin panal

Sophia Baker

3 years ago

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

Dika Rahman

2 years ago

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

Nikita

2 years ago

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

Mereani Waqa

2 years ago

8.7k
Statastics cards

Shakti

3 years ago

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

Santos78

3 years ago

12.9k