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

11.2k

15

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

2 years ago

16.6k
Tiles for showing stats

Author:
Task Master

2 years ago

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

Author:
Arya

2 years ago

11.7k
Info cards for admin panal

Author:
Sophia Baker

2 years ago

9k
Information cards for admin panal
Stats cards

Author:
Brandon D

2 years ago

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

Author:
Samuel Dawson

2 years ago

10.7k
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

2 years ago

10k
Info cards

Author:
Samuel Dawson

2 years ago

10k
Basic stat cards

Author:
Santos78

2 years ago

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

Author:
Mereani Waqa

1 year ago

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

Author:
Nikita

1 year ago

4.4k
Service Metrics cards

Author:
Paul Intay

1 year ago

2.4k

Explore components by Tags

Didn't find component you were looking for?

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