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

10.2k

9

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

1 year ago

16.7k
Responsive Card Grid with hover animation

Author:
Prashant

2 years ago

16.8k
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

1 year ago

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

Author:
Arya

2 years ago

11.8k
Statistics card section

Author:
Laurits

2 years ago

14.5k
Info cards
Show various statistics on your website

Author:
Arya

2 years ago

10.1k
Info cards for admin panal

Author:
Sophia Baker

1 year ago

8.5k
multiple pricing cards
basic pricing card with single price

Author:
Amit Pachange

1 year ago

11.2k
Weather info Card
Inspired from Mamba UI

Author:
Ron Hicks

2 years ago

10.6k
Semi transparent Info card

Author:
Prajwal Hallale

1 year ago

10.7k
Info cards

Author:
Samuel Dawson

1 year ago

9.1k
Information card

Author:
Samuel Dawson

2 years ago

10.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ 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

© 2024 TailwindFlex. All Rights Reserved.

v1.9