Home
Prajwal Hallale
Stats cards for admin panel

Stats cards for admin panel

Forked from> @prajwal/info-cards-grid-with-icons

This Component is designed to present statistics in a tile format.
It comprises a title, a large numeric value, and an icon, creating an eye-catching way to display data.

This tailwind example is contributed by Prajwal Hallale, on 12-Oct-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

Stats Grid

Author Prajwal Hallale

6.7k

Fork Fullscreen

<p class="flex justify-center w-full gap-2 pt-4 font-extrabold text-2xl md:text-3xl dark:text-white">
            <span>Impact</span>

<div title="All countributed components"
                class="flex flex-col justify-center items-center gap-2 border-2 border-dashed border-gray-500/50 p-4 rounded-md h-32 dark:text-gray-200">
                <div class="flex gap-2 items-center">
                    <span class="font-bold text-3xl md:text-4xl">
                30
            </span>
                    <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"></path>
                    </svg>
                </div>
                <span class="font-semibold text-sm text-center">Components contributed</span>
            </div>

<div title="Users got help"
                class="flex flex-col justify-center items-center gap-2 border-2 border-dashed border-gray-500/50 p-4 rounded-md h-32 dark:text-gray-200">
                <div class="flex gap-2 items-center">
                    <span class="font-bold text-3xl md:text-4xl">
                93.9k
            </span>
                    <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z">
                        </path>
                    </svg>
                </div>
                <span class="font-semibold text-sm text-center">Users got help</span>
            </div>

<div title="Total favorites received on components"
                class="flex flex-col justify-center items-center gap-2 border-2 border-dashed border-gray-500/50 p-4 rounded-md h-32 dark:text-gray-200">
                <div class="flex gap-2 items-center">
                    <span class="font-bold text-3xl md:text-4xl">
                60
            </span>
                    <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z">
                        </path>
                    </svg>
                </div>
                <span class="font-semibold text-sm text-center">Favorites received</span>
            </div>

<div title="component views"
                class="md:col-start-2 lg:col-auto flex flex-col justify-center items-center gap-2 border-2 border-dashed border-gray-500/50 p-4 rounded-md h-32 dark:text-gray-200">
                <div class="flex gap-2 items-center">
                    <span class="font-bold text-3xl md:text-4xl">
                3.3k
            </span>
                    <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z">
                        </path>
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z">
                        </path>
                    </svg>
                </div>
                <span class="font-semibold text-sm text-center">Views in last 30 days</span>
            </div>

</div>

Related Examples

Data Metrics Showcase
An information panel designed to instill trust, presenting vital statistics about a service or product. The grid layout offers a clean and organized look for displaying key data.

Author:
Hyun-woo Cho

1 year ago

8.2k
Stats Showcase
Tiles showcasing noteworthy achievements or metrics.

Author:
Andrew Hughes

1 year ago

9.2k
Info cards
Show various statistics on your website

Author:
Arya

2 years ago

11.1k
Feature overview cards
The component is designed to be responsive, featuring a title, a brief description, and a set of cards presenting key metrics.

Author:
Nikita

1 year ago

4.6k
Information cards for admin panal
Stats cards

Author:
Brandon D

2 years ago

10.3k
Info cards grid with icons
Evenly-sized cards for showing various stats on the user/admin dashboard.

Author:
Prajwal Hallale

2 years ago

7.8k
Responsive data cards

Author:
EliteAI Tools

6 months ago

1.4k
Info card

Author:
Samuel Dawson

2 years ago

9.7k
Images grid
Responsive image grid with tailwindcss.

Author:
Sienna

2 years ago

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

Author:
Arya

2 years ago

11.8k
Responsive grid example

Author:
Charlotte Dupont

2 years ago

12.4k
Tailwind Flex Component: Responsive Testimonial Section UI
A clean, modern, and fully responsive Testimonial Section built using Tailwind CSS and Flexbox. Ideal for portfolios, agency websites, SaaS landing pages, or any modern UI project. This reusable component includes user images, job titles, and quotes—perfect for showcasing feedback and adding trust to your UI.

Author:
Muhammad Umair Arshad

2 months ago

226

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components