Info cards

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

Card Stats

Author Samuel Dawson

Tailwind v3.4 11.4k 9

Fork Fullscreen

<div class="mt-2 text-sm text-gray-400">Comments</div>
    </a>

<a href="#"
        class="flex h-20 w-40 flex-col items-center justify-center rounded-md border border-dashed border-gray-200 transition-colors duration-100 ease-in-out hover:border-gray-400/80">
        <div class="flex flex-row items-center justify-center">
            <svg class="mr-3 fill-gray-500/95" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24">
                <path
                    d="M2.5 19.6L3.8 20.2V11.2L1.4 17C1 18.1 1.5 19.2 2.5 19.6M15.2 4.8L20.2 16.8L12.9 19.8L7.9 7.9V7.8L15.2 4.8M15.3 2.8C15 2.8 14.8 2.8 14.5 2.9L7.1 6C6.4 6.3 5.9 7 5.9 7.8C5.9 8 5.9 8.3 6 8.6L11 20.5C11.3 21.3 12 21.7 12.8 21.7C13.1 21.7 13.3 21.7 13.6 21.6L21 18.5C22 18.1 22.5 16.9 22.1 15.9L17.1 4C16.8 3.2 16 2.8 15.3 2.8M10.5 9.9C9.9 9.9 9.5 9.5 9.5 8.9S9.9 7.9 10.5 7.9C11.1 7.9 11.5 8.4 11.5 8.9S11.1 9.9 10.5 9.9M5.9 19.8C5.9 20.9 6.8 21.8 7.9 21.8H9.3L5.9 13.5V19.8Z" />
            </svg>

<div class="mt-2 text-sm text-gray-400">Projects</div>
    </a>

<a href="#"
        class="flex h-20 w-40 flex-col items-center justify-center rounded-md border border-dashed border-gray-200 transition-colors duration-100 ease-in-out hover:border-gray-400/80">
        <div class="flex flex-row items-center justify-center">
            <svg class="mr-3 fill-gray-500/95" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24">
                <path
                    d="M5.68,19.74C7.16,20.95 9,21.75 11,21.95V19.93C9.54,19.75 8.21,19.17 7.1,18.31M13,19.93V21.95C15,21.75 16.84,20.95 18.32,19.74L16.89,18.31C15.79,19.17 14.46,19.75 13,19.93M18.31,16.9L19.74,18.33C20.95,16.85 21.75,15 21.95,13H19.93C19.75,14.46 19.17,15.79 18.31,16.9M15,12A3,3 0 0,0 12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12M4.07,13H2.05C2.25,15 3.05,16.84 4.26,18.32L5.69,16.89C4.83,15.79 4.25,14.46 4.07,13M5.69,7.1L4.26,5.68C3.05,7.16 2.25,9 2.05,11H4.07C4.25,9.54 4.83,8.21 5.69,7.1M19.93,11H21.95C21.75,9 20.95,7.16 19.74,5.68L18.31,7.1C19.17,8.21 19.75,9.54 19.93,11M18.32,4.26C16.84,3.05 15,2.25 13,2.05V4.07C14.46,4.25 15.79,4.83 16.9,5.69M11,4.07V2.05C9,2.25 7.16,3.05 5.68,4.26L7.1,5.69C8.21,4.83 9.54,4.25 11,4.07Z" />
            </svg>

<div class="mt-2 text-sm text-gray-400">Downloads</div>
    </a>
</div>

Related Examples

Admin dashboard cards
Card groups for showing stats/info.

Gopi Yadav

3 years ago

22.2k
Responsive Card Grid with hover animation

Prashant

4 years ago

20.6k
Beautiful info cards
Responsive and minimal design

Amit Pachange

3 years ago

10.9k
Statistics card section

Laurits

3 years ago

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

Arya

3 years ago

12.6k
Info card for admin panal
Show stats on your dashboard

Arya

4 years ago

13.5k
Tiles for showing stats

Task Master

3 years ago

13.8k
Weather info Card
Inspired from Mamba UI

Ron Hicks

4 years ago

12.7k
Info Card

Prem..

3 years ago

20.7k
Info cards
Show various statistics on your website

Arya

3 years ago

12k
User Profile Card
The card features a user's profile picture, name, location, and options for interactions. It has a clean and modern design with rounded edges and icons for user engagement. It also has support for dark mod:

Prashant

4 years ago

65.5k
Info cards for admin panal

Sophia Baker

3 years ago

10.5k
Semi transparent Info card

Prajwal Hallale

3 years ago

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

Santos78

3 years ago

12.8k
Info cards for admin panel

Sophia Baker

3 years ago

12.8k