Statastics cards

This tailwind example is contributed by Shakti, on 08-Jun-2023. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Info, Show info, Statistics

Stats

Author Shakti

Tailwind v3.4 15.2k 15

Fork Fullscreen

<div class="mb-12 text-center md:mb-0 md:border-r-2 dark:md:border-slate-500">
            <div class="font-heading text-[2.6rem] font-bold dark:text-white lg:text-5xl xl:text-6xl">
                13.3K
            </div>
            <p class="text-sm font-medium uppercase tracking-widest text-gray-800 dark:text-slate-400 lg:text-base">
                Downloads
            </p>
        </div>

<div class="mb-12 text-center md:mb-0 md:border-r-2 dark:md:border-slate-500">
            <div class="font-heading text-[2.6rem] font-bold dark:text-white lg:text-5xl xl:text-6xl">
                25
            </div>
            <p class="text-sm font-medium uppercase tracking-widest text-gray-800 dark:text-slate-400 lg:text-base">
                Stars
            </p>
        </div>

<div class="mb-12 text-center md:mb-0 md:border-r-2 dark:md:border-slate-500">
            <div class="font-heading text-[2.6rem] font-bold dark:text-white lg:text-5xl xl:text-6xl">
                1.8K
            </div>
            <p class="text-sm font-medium uppercase tracking-widest text-gray-800 dark:text-slate-400 lg:text-base">
                Forks
            </p>
        </div>

<div class="mb-12 text-center md:mb-0 md:border-r-2 dark:md:border-slate-500">
            <div class="font-heading text-[2.6rem] font-bold dark:text-white lg:text-5xl xl:text-6xl">
                484K
            </div>
            <p class="text-sm font-medium uppercase tracking-widest text-gray-800 dark:text-slate-400 lg:text-base">
                Users
            </p>
        </div>

</div>

Related Examples

Statistics card section

Laurits

3 years ago

18.8k
Beautiful info cards
Responsive and minimal design

Amit Pachange

3 years ago

11k
Stats block
basic stats section

Simon Scheffer

3 years ago

10.9k
Responsive Card Grid with hover animation

Prashant

4 years ago

20.7k
Information cards for admin panal
Stats cards

Brandon D

3 years ago

11.2k
ExtraLarge stats section

Manon Daniel

3 years ago

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

2 years ago

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

Prajwal Hallale

2 years ago

7k
Landi page template
con un cuerpo libre

Raul antonio de la cruz hernandez

9 months ago

912
Information card

Samuel Dawson

3 years ago

12.8k
Info cards grid with icons
Evenly-sized cards for showing various stats on the user/admin dashboard.

Prajwal Hallale

3 years ago

7.9k
Basic stat cards

Santos78

3 years ago

12.4k