Info cards for admin panel

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

Author Sophia Baker

Tailwind v3.4 12.8k 14

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.

Gopi Yadav

3 years ago

22.2k
Responsive Card Grid with hover animation

Prashant

4 years ago

20.7k
Beautiful info cards
Responsive and minimal design

Amit Pachange

3 years ago

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

Arya

4 years ago

13.6k
Statistics card section

Laurits

3 years ago

18.8k
Info cards
Show various statistics on your website

Arya

3 years ago

12k
Info cards for admin panal

Sophia Baker

3 years ago

10.5k
multiple pricing cards
basic pricing card with single price

Amit Pachange

3 years ago

13.2k
Weather info Card
Inspired from Mamba UI

Ron Hicks

4 years ago

12.7k
Semi transparent Info card

Prajwal Hallale

3 years ago

11.2k
Information card

Samuel Dawson

3 years ago

12.8k
Info cards

Samuel Dawson

3 years ago

11.4k

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.