Home
Santos78
Basic stat cards

Basic stat cards

This tailwind example is contributed by Santos78, on 13-Mar-2023. 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 Santos78

10.9k

8

Fork Fullscreen

<div class="bg-gray-200 h-screen w-screen">
    <div class="grid gap-4 lg:gap-8 md:grid-cols-3 p-8 pt-20">
        
        <div class="relative p-6 rounded-2xl bg-white shadow dark:bg-gray-800">
            <div class="space-y-2">
                <div
                    class="flex items-center space-x-2 rtl:space-x-reverse text-sm font-medium text-gray-500 dark:text-gray-200">
                    <span>Total Products</span>
                </div>

<div class="text-3xl">
                    50
                </div>

</div>

</div>

<div class="relative p-6 rounded-2xl bg-white shadow dark:bg-gray-800">
            <div class="space-y-2">
                <div
                    class="flex items-center space-x-2 rtl:space-x-reverse text-sm font-medium text-gray-500 dark:text-gray-200">

<span>Product Inventory</span>
                </div>

<div class="text-3xl">
                    221
                </div>

</div>

</div>

<div class="relative p-6 rounded-2xl bg-white shadow dark:bg-gray-800">
            <div class="space-y-2">
                <div
                    class="flex items-center space-x-2 rtl:space-x-reverse text-sm font-medium text-gray-500 dark:text-gray-200">

<span>Average price</span>
                </div>

<div class="text-3xl">
                    224.75
                </div>

</div>

</div>
    </div>
</div>

Related Examples

Tiles for showing stats

Author:
Task Master

2 years ago

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

Author:
Arya

2 years ago

11.2k
Tailwind stat cards
Highlight key statistics

Author:
Anonymous

1 year ago

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

Author:
Santos78

1 year ago

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

Author:
Mereani Waqa

1 year ago

6.5k
Info cards

Author:
Lukas Müller

2 years ago

10.7k
Semi transparent Info card

Author:
Prajwal Hallale

2 years ago

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

Author:
Pixel Perfect

9 months ago

962
Simple Kpi
This ui block is meant to be used display Key indicators on an app or website.

Author:
Ranit Saha

2 months ago

371
Stats Banner Example
Show your stats proudly

Author:
Nomusa Botha

9 months ago

1.1k
Information cards for admin panal
Stats cards

Author:
Brandon D

2 years ago

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

Author:
Mereani Waqa

1 year ago

4.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1