Home
Brandon D
Information cards for admin panal

Information cards for admin panal

Stats cards

This tailwind example is contributed by Brandon D, on 30-Jan-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Info, Show info, Statistics

Stats Grid

Author Brandon D

8.6k

Fork Fullscreen

<div class="grid grid-cols-1 gap-8 p-10 mt-14 lg:grid-cols-2 xl:grid-cols-4">
    
    <div class="flex items-center shadow justify-between p-4 bg-white rounded-md">
        <div>
            <h6 class="text-xs font-medium leading-none tracking-wider text-gray-500 uppercase">
                Value
            </h6>
            <span class="text-xl font-semibold">$30,000</span>
            <span class="inline-block px-2 py-px ml-2 text-xs text-green-500 bg-green-100 rounded-md">
                +4.4%
            </span>
        </div>
        <div>
            <span>
                <svg class="w-12 h-12 text-gray-300" xmlns="http://www.w3.org/2000/svg"
                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
                    </path>
                </svg>
            </span>
        </div>
    </div>

<div class="flex items-center shadow justify-between p-4 bg-white rounded-md">
        <div>
            <h6 class="text-xs font-medium leading-none tracking-wider text-gray-500 uppercase">
                Users
            </h6>
            <span class="text-xl font-semibold">50,021</span>
            <span class="inline-block px-2 py-px ml-2 text-xs text-green-500 bg-green-100 rounded-md">
                +2.6%
            </span>
        </div>
        <div>
            <span>
                <svg class="w-12 h-12 text-gray-300" xmlns="http://www.w3.org/2000/svg"
                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z">
                    </path>
                </svg>
            </span>
        </div>
    </div>

<div class="flex items-center shadow justify-between p-4 bg-white rounded-md">
        <div>
            <h6 class="text-xs font-medium leading-none tracking-wider text-gray-500 uppercase">
                Orders
            </h6>
            <span class="text-xl font-semibold">45,021</span>
            <span class="inline-block px-2 py-px ml-2 text-xs text-green-500 bg-green-100 rounded-md">
                +3.1%
            </span>
        </div>
        <div>
            <span>
                <svg class="w-12 h-12 text-gray-300" xmlns="http://www.w3.org/2000/svg"
                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                </svg>
            </span>
        </div>
    </div>

<div class="flex items-center shadow justify-between p-4 bg-white rounded-md">
        <div>
            <h6 class="text-xs font-medium leading-none tracking-wider text-gray-500 uppercase">
                Tickets
            </h6>
            <span class="text-xl font-semibold">20,516</span>
            <span class="inline-block px-2 py-px ml-2 text-xs text-green-500 bg-green-100 rounded-md">
                +3.1%
            </span>
        </div>
        <div>
            <span>
                <svg class="w-12 h-12 text-gray-300" xmlns="http://www.w3.org/2000/svg"
                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z">
                    </path>
                </svg>
            </span>
        </div>
    </div>
</div>

Related Examples

Tiles for showing stats

Author:
Task Master

1 year ago

10.4k
Statistics card section

Author:
Laurits

1 year ago

13.4k
Responsive Info cards for admin panel
Show stats to the admin dashboard

Author:
Santos78

1 year ago

9.3k
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

11 months ago

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

Author:
Arya

1 year ago

10.3k
Stats Showcase
Tiles showcasing noteworthy achievements or metrics.

Author:
Andrew Hughes

11 months ago

7.2k
Feature Showcase
The feature showcase's responsive grid can also be used as testimonial cards.

Author:
Alok

1 year ago

17.6k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
Amit Pachange

2 years ago

41k
Statastics cards

Author:
Shakti

1 year ago

12.6k
Info cards
Show various statistics on your website

Author:
Arya

1 year ago

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

Author:
Prajwal Hallale

1 year ago

7.6k
Stats cards for admin panel
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.

Author:
Prajwal Hallale

11 months ago

6.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 1600+ componenent