Home
Prajwal Hallale
Info cards grid with icons

Info cards grid with icons

Evenly-sized cards for showing various stats on the user/admin dashboard.

This tailwind example is contributed by Prajwal Hallale, on 26-May-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Info, Show info, Statistics

Stats Grid

Author Prajwal Hallale

7.8k

Fork Fullscreen

<div
        class="flex flex-col justify-center items-center gap-2 border border-dashed border-gray-500 p-4 rounded-md h-32">
        <div class="flex gap-2 items-center">
            <span class="font-bold text-4xl">20</span>
            <svg class="w-8 h-8 opacity-70" 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="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m6.75 12l-3-3m0 0l-3 3m3-3v6m-1.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z">
                </path>
            </svg>
        </div>
        <span class="font-semibold opacity-70 text-sm text-center">Documents Contributed</span>
    </div>

</div>
        <span class="font-semibold opacity-70 text-sm text-center">Thanks Received</span>
    </div>

<div
        class="flex flex-col justify-center items-center gap-2 border border-dashed border-gray-500 p-4 rounded-md h-32">
        <div class="flex gap-2 items-center">
            <span class="font-bold text-4xl">34K</span>
            <svg class="w-8 h-8 opacity-70" 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" />
            </svg>
        </div>
        <span class="font-semibold opacity-70 text-sm text-center">Helped students</span>
    </div>

</div>
        <span class="font-semibold opacity-70 text-sm text-center">Highest Rank</span>
    </div>

</div>

Related Examples

Statistics card section

Author:
Laurits

2 years ago

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

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

48.5k
Info cards
Show various statistics on your website

Author:
Arya

2 years ago

10.8k
Stats Showcase
Tiles showcasing noteworthy achievements or metrics.

Author:
Andrew Hughes

1 year ago

8.8k
Responsive products grid
Responsive product card grid using tailwind CSS.

Author:
Arya

2 years ago

40.2k
Information cards for admin panal
Stats cards

Author:
Brandon D

2 years ago

9.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.

Author:
Prajwal Hallale

1 year ago

6.7k
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.3k
Responsive data cards

Author:
EliteAI Tools

3 months ago

795
Stats Banner Example
Show your stats proudly

Author:
Nomusa Botha

9 months ago

1.2k
Contact Form Component
A multi-step, responsive contact form with a modern dark-themed design. The form includes four steps: name, email, phone number, and message. It features a side panel with contact information and a sleek, gradient-styled interface using Tailwind CSS.

Author:
Muhammad Umair Arshad

2 weeks ago

63

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components