Home
Santos78
Responsive Info cards for admin panel

Responsive Info cards for admin panel

Show stats to the admin dashboard

This tailwind example is contributed by Santos78, on 21-Apr-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

12.2k

18

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-400">
                    <span>Revenue</span>
                </div>

<div class="text-3xl dark:text-gray-100">
                    $192.1k
                </div>

<div class="flex items-center space-x-1 rtl:space-x-reverse text-sm font-medium text-green-600">

<span>32k increase</span>

<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                        aria-hidden="true">
                        <path fill-rule="evenodd"
                            d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z"
                            clip-rule="evenodd"></path>
                    </svg>
                </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-400">
                    <span>New customers</span>
                </div>

<div class="text-3xl dark:text-gray-100">
                    1340
                </div>

<div class="flex items-center space-x-1 rtl:space-x-reverse text-sm font-medium text-red-600">

<span>3% decrease</span>

<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                        aria-hidden="true">
                        <path fill-rule="evenodd"
                            d="M12 13a1 1 0 100 2h5a1 1 0 001-1V9a1 1 0 10-2 0v2.586l-4.293-4.293a1 1 0 00-1.414 0L8 9.586 3.707 5.293a1 1 0 00-1.414 1.414l5 5a1 1 0 001.414 0L11 9.414 14.586 13H12z"
                            clip-rule="evenodd"></path>
                    </svg>
                </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-400">

<span>New orders</span>
                </div>

<div class="text-3xl dark:text-gray-100">
                    3543
                </div>

<div class="flex items-center space-x-1 rtl:space-x-reverse text-sm font-medium text-green-600">

<span>7% increase</span>

<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                        aria-hidden="true">
                        <path fill-rule="evenodd"
                            d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z"
                            clip-rule="evenodd"></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

Statistics card section

Author:
Laurits

3 years ago

17.6k
Tiles for showing stats

Author:
Task Master

2 years ago

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

Author:
Arya

3 years ago

12.2k
Info cards for admin panal

Author:
Sophia Baker

3 years ago

9.7k
Information cards for admin panal
Stats cards

Author:
Brandon D

2 years ago

10.8k
Daily growth chart
chart for showing data each day of the week

Author:
Samuel Dawson

3 years ago

11.4k
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

3 years ago

10.5k
Info cards

Author:
Samuel Dawson

3 years ago

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

Author:
Mereani Waqa

2 years ago

5.8k
Basic stat cards

Author:
Santos78

2 years ago

11.4k
Info card for admin panal
Show stats on your dashboard

Author:
Arya

3 years ago

13.1k
Responsive Features Section

Author:
Abdul Baset Bappy

7 months ago

909

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ 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

© 2026 TailwindFlex. All Rights Reserved.

v1.12