Home
Sophia Baker
Info cards for admin panel

Info cards for admin panel

This tailwind example is contributed by Sophia Baker, on 20-Jan-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

Card Stats

Author Sophia Baker

11k

11

Fork Fullscreen

<div class="h-screen dark:bg-gray-800 flex justify-center items-center">
    <section class="grid gap-6 md:grid-cols-3 p-4 md:p-8 max-w-5xl mx-auto w-full ">
        <div class="p-6 bg-white shadow rounded-2xl dark:bg-gray-900">
            <dl class="space-y-2">
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Unique views</dt>

<dd class="text-5xl font-light md:text-6xl dark:text-white">192.1k</dd>

<dd class="flex items-center space-x-1 text-sm font-medium text-green-500 dark:text-green-400">
                    <span>32k increase</span>

<svg class="w-7 h-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                            d="M17.25 15.25V6.75H8.75"></path>
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                            d="M17 7L6.75 17.25"></path>
                    </svg>
                </dd>
            </dl>
        </div>

<div class="p-6 bg-white shadow rounded-2xl dark:bg-gray-900">
            <dl class="space-y-2">
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Bounce rate</dt>

<dd class="text-5xl font-light md:text-6xl dark:text-white">21%</dd>

<dd class="flex items-center space-x-1 text-sm font-medium text-red-500 dark:text-red-400">
                    <span>7% increase</span>

<svg class="w-7 h-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                            d="M17.25 8.75V17.25H8.75"></path>
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                            d="M17 17L6.75 6.75"></path>
                    </svg>
                </dd>
            </dl>
        </div>

<div class="p-6 bg-white shadow rounded-2xl dark:bg-gray-900">
            <dl class="space-y-2">
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Average time on page</dt>

<dd class="text-5xl font-light md:text-6xl dark:text-white">03:12</dd>

<dd class="flex items-center space-x-1 text-sm font-medium text-green-500 dark:text-green-400">
                    <span>3% increase</span>

<svg class="w-7 h-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                            d="M17.25 15.25V6.75H8.75"></path>
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                            d="M17 7L6.75 17.25"></path>
                    </svg>
                </dd>
            </dl>
        </div>
    </section>

</div>

Related Examples

Admin dashboard cards
Card groups for showing stats/info.

Author:
Gopi Yadav

2 years ago

19.2k
Responsive Card Grid with hover animation

Author:
Prashant

2 years ago

18.3k
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

2 years ago

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

Author:
Arya

2 years ago

12.3k
Statistics card section

Author:
Laurits

2 years ago

16.4k
Info cards
Show various statistics on your website

Author:
Arya

2 years ago

11k
Info cards for admin panal

Author:
Sophia Baker

2 years ago

9k
multiple pricing cards
basic pricing card with single price

Author:
Amit Pachange

1 year ago

11.9k
Weather info Card
Inspired from Mamba UI

Author:
Ron Hicks

2 years ago

11.5k
Semi transparent Info card

Author:
Prajwal Hallale

2 years ago

11k
Info cards

Author:
Samuel Dawson

2 years ago

10k
Information card

Author:
Samuel Dawson

2 years ago

11.5k

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