Info cards

This tailwind example is contributed by Lukas Müller, on 13-Feb-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Info, Show info, Statistics

Stats

Author Lukas Müller

Tailwind v3.4 12.1k 10

Fork Fullscreen

<div class="flex flex-row flex-wrap justify-center gap-10">
    <div class="flex flex-col bg-slate-200 rounded-lg p-4 shadow-md hover:cursor-pointer hover:bg-slate-100 hover:shadow-lg">
        <div class="flex gap-2"><svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24" class="m-auto" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
                <path d="M13 5.07089C16.3923 5.55612 19 8.47353 19 12C19 15.866 15.866 19 12 19C8.13401 19 5 15.866 5 12C5 9.96159 5.87128 8.12669 7.26175 6.84738L5.84658 5.43221C4.09461 7.0743 3 9.40932 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C11.662 3 11.3283 3.01863 11 3.05493V9.08551H13V5.07089Z" fill="currentColor"></path>
                <path d="M7.70711 8.70708C7.31658 9.0976 7.31658 9.73077 7.70711 10.1213L10.5355 12.9497C10.9261 13.3402 11.5592 13.3402 11.9497 12.9497C12.3403 12.5592 12.3403 11.926 11.9497 11.5355L9.12132 8.70708C8.7308 8.31655 8.09763 8.31655 7.70711 8.70708Z" fill="currentColor"></path>
            </svg>
            <div class="font-mono font-bold">Pomodoro Time</div>
        </div>
        <div class="flex justify-center text-2xl">25</div>
    </div>
    <div class="flex flex-col bg-slate-200 rounded-lg p-4 shadow-md hover:cursor-pointer hover:bg-slate-100 hover:shadow-lg">
        <div class="flex gap-2"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
                <g>
                    <path fill="none" d="M0 0h24v24H0z"></path>
                    <path d="M17.618 5.968l1.453-1.453 1.414 1.414-1.453 1.453a9 9 0 1 1-1.414-1.414zM12 20a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM11 8h2v6h-2V8zM8 1h8v2H8V1z"></path>
                </g>
            </svg>
            <div class="font-mono font-bold">Short Break</div>
        </div>
        <div class="flex justify-center text-2xl">5</div>
    </div>
    <div class="flex flex-col bg-slate-50 rounded-lg p-4 shadow-md hover:cursor-pointer hover:shadow">
        <div class="flex gap-2"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
                <g>
                    <path fill="none" d="M0 0h24v24H0z"></path>
                    <path d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm0 18c4.42 0 8-3.58 8-8s-3.58-8-8-8-8 3.58-8 8 3.58 8 8 8zm3.536-12.95l1.414 1.414-4.95 4.95L10.586 12l4.95-4.95z"></path>
                </g>
            </svg>
            <div class="font-mono font-bold">Long Break</div>
        </div>
        <div class="flex justify-center text-2xl">15</div>
    </div>
</div>

Related Examples

Statistics card section

Laurits

3 years ago

18.8k
Tiles for showing stats

Task Master

3 years ago

13.8k
Info cards
Show various statistics on your website

Arya

3 years ago

12k
Block Group kpis

Ranit Saha

1 year ago

1.2k
Information cards for admin panal
Stats cards

Brandon D

3 years ago

11.2k
Weather info Card
Inspired from Mamba UI

Ron Hicks

4 years ago

12.7k
Info Card

Prem..

4 years ago

20.8k
Stats or Metrics Overview
Highlight your achievements with our Stats Section, featuring key metrics such as years of experience, happy clients, completed projects, and awards. This visually engaging component effectively communicates your expertise and success at a glance

Anum Shahana

1 year ago

1.8k
How does it work Steps example
Dark themed steps section

Mereani Waqa

2 years ago

8.7k
Calender
Calendar component for showing schedule

Brandon D

4 years ago

8.9k
Stats - Htmlwind
Simple stats

Htmlwind

1 year ago

1.6k
Semi transparent Info card

Prajwal Hallale

3 years ago

11.2k