Home
Lukas Müller
Info cards

Info cards

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

Stats

Author Lukas Müller

11.6k

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

Author:
Laurits

2 years ago

17.4k
Tiles for showing stats

Author:
Task Master

2 years ago

12.8k
Metrics overview cards
stat cards

Author:
Quentin Rivers

1 year ago

1.6k
Statastics cards

Author:
Shakti

2 years ago

14.5k
Semi transparent Info card

Author:
Prajwal Hallale

2 years ago

11.1k
Tailwind stat cards
Highlight key statistics

Author:
Anonymous

2 years ago

10.1k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

165
How does it work?

Author:
Abdul Baset Bappy

4 months ago

404
Info cards for admin panal

Author:
Sophia Baker

2 years ago

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

2 years ago

8.5k
Weather info Card
Inspired from Mamba UI

Author:
Ron Hicks

3 years ago

12k
Block Group kpis

Author:
Ranit Saha

9 months ago

541

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components