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

3 years ago

17.7k
Tiles for showing stats

Author:
Task Master

3 years ago

12.9k
Information card

Author:
Samuel Dawson

3 years ago

12.1k
Info card

Author:
Samuel Dawson

3 years ago

10.2k
machine
A fully interactive, web-based macOS-style desktop environment featuring draggable and resizable windows, a dynamic Dock with magnification, smooth glass UI effects, adaptive colors, a functional photo gallery with hover menus, and integrated mini-apps like Safari, Notes, Weather, and App Store. Built using HTML, CSS, Tailwind, and JavaScript to recreate a modern OS experience directly in the browser.

Author:
Gidy Official

2 months ago

222
Daily growth chart
chart for showing data each day of the week

Author:
Samuel Dawson

3 years ago

11.4k
Information cards for admin panal
Stats cards

Author:
Brandon D

3 years ago

10.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

Author:
Anum Shahana

1 year ago

1.3k
ExtraLarge stats section

Author:
Manon Daniel

2 years ago

13.8k
Semi transparent Info card

Author:
Prajwal Hallale

2 years ago

11.1k
Stats card with icons
Improved Code quality and added support for dark mode

Author:
Dika Rahman

1 year ago

1.8k
Info cards for admin panal

Author:
Sophia Baker

3 years ago

9.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components