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 v3.4. It is responsive. It supports dark mode. similar terms for this example are Info, Show info, Statistics

Stats

Author Santos78

Tailwind v3.4 12.9k 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

Laurits

3 years ago

18.8k
Tiles for showing stats

Task Master

3 years ago

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

Arya

3 years ago

12.7k
Info cards for admin panal

Sophia Baker

3 years ago

10.5k
Information cards for admin panal
Stats cards

Brandon D

3 years ago

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

Samuel Dawson

3 years ago

12k
Beautiful info cards
Responsive and minimal design

Amit Pachange

3 years ago

11k
Info cards

Samuel Dawson

3 years ago

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

Mereani Waqa

2 years ago

6.4k
Basic stat cards

Santos78

3 years ago

12.5k
Block Group kpis

Ranit Saha

1 year ago

1.2k
Semi transparent Info card

Prajwal Hallale

3 years ago

11.2k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.