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

10k

14

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

1 year ago

14.4k
Tiles for showing stats

Author:
Task Master

1 year ago

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

Author:
Arya

2 years ago

10.6k
Info cards for admin panal

Author:
Sophia Baker

1 year ago

8.5k
Information cards for admin panal
Stats cards

Author:
Brandon D

1 year ago

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

Author:
Samuel Dawson

1 year ago

10k
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

1 year ago

9.1k
Info cards

Author:
Samuel Dawson

1 year ago

9k
Basic stat cards

Author:
Santos78

1 year ago

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

Author:
Mereani Waqa

1 year ago

4.4k
Stats block
basic stats section

Author:
Simon Scheffer

1 year ago

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

Author:
Hyun-woo Cho

1 year ago

7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ componenent

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

© 2024 TailwindFlex. All Rights Reserved.

v1.9