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.7k
Tiles for showing stats

Task Master

3 years ago

13.8k
AI Trends Showcase
A clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts. Perfect For Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.

Ayyamperumal S

3 months ago

227
Basic stat cards

Santos78

3 years ago

12.3k
Information card

Samuel Dawson

3 years ago

12.8k
Responsive Features Section

Abdul Baset Bappy

1 year ago

1.5k
Info cards

Samuel Dawson

3 years ago

11.4k
Info Card

Prem..

3 years ago

20.7k
sidebar dash
sidebar dash

Omer fils ELENGA

8 months ago

952
Stats Showcase
Tiles showcasing noteworthy achievements or metrics.

Andrew Hughes

2 years ago

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

Prajwal Hallale

3 years ago

7.9k
Progress Bar
A progress bar is a UI element that visually represents the completion status of a task or process. It helps users understand how much of a task has been completed and how much remains. Commonly used in forms, file uploads, loading screens, or multi-step processes, it enhances the user experience by providing clear feedback.

Abhiraj

1 year ago

1.4k