Information cards for admin panal

Stats cards

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

Stats Grid

Author Brandon D

Tailwind v3.4 11.2k 12

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

Task Master

3 years ago

13.8k
Statistics card section

Laurits

3 years ago

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

Santos78

3 years ago

12.9k
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.

Hyun-woo Cho

2 years ago

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

Arya

3 years ago

12.7k
Stats Showcase
Tiles showcasing noteworthy achievements or metrics.

Andrew Hughes

2 years ago

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

Alok

3 years ago

26.7k
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.

Amit Pachange

4 years ago

53.8k
Statastics cards

Shakti

3 years ago

15.2k
Info cards
Show various statistics on your website

Arya

3 years ago

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

Prajwal Hallale

3 years ago

7.9k
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.

Prajwal Hallale

2 years ago

7k