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 v3.4. It is responsive. similar terms for this example are Info, Show info, Statistics

Stats Grid

Author Prajwal Hallale

Tailwind v3.4 7.9k 6

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

Laurits

3 years ago

18.8k
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
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
Info cards
Show various statistics on your website

Arya

3 years ago

12k
Stats Showcase
Tiles showcasing noteworthy achievements or metrics.

Andrew Hughes

2 years ago

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

Arya

3 years ago

46.2k
Information cards for admin panal
Stats cards

Brandon D

3 years ago

11.2k
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
Feature overview cards
The component is designed to be responsive, featuring a title, a brief description, and a set of cards presenting key metrics.

Nikita

2 years ago

5.8k
Responsive data cards

EliteAI Tools

1 year ago

2.3k
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Hamza Atig

1 year ago

1.6k
Gaming Platforms Grid

ariaw

9 months ago

880