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

12.1k

12

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

3 years ago

21.4k
Responsive Card Grid with hover animation

Author:
Prashant

3 years ago

19.8k
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

3 years ago

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

Author:
Arya

3 years ago

13.1k
Statistics card section

Author:
Laurits

3 years ago

17.7k
Info cards
Show various statistics on your website

Author:
Arya

3 years ago

11.6k
Info cards for admin panal

Author:
Sophia Baker

3 years ago

9.7k
multiple pricing cards
basic pricing card with single price

Author:
Amit Pachange

2 years ago

12.6k
Weather info Card
Inspired from Mamba UI

Author:
Ron Hicks

3 years ago

12.1k
Semi transparent Info card

Author:
Prajwal Hallale

2 years ago

11.1k
Information card

Author:
Samuel Dawson

3 years ago

12.1k
Info cards

Author:
Samuel Dawson

3 years ago

11.1k

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