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

11k

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

16.6k
Tiles for showing stats

Author:
Task Master

2 years ago

12.3k
Stats Section
The gradient background stats section uses dark shades of gradient change colors according to your website theme

Author:
Santiago Hernandez

1 year ago

2.2k
Daily growth chart
chart for showing data each day of the week

Author:
Samuel Dawson

2 years ago

10.7k
Metrics overview cards
stat cards

Author:
Quentin Rivers

8 months ago

1k
Information cards for admin panal
Stats cards

Author:
Brandon D

2 years ago

10.2k
Stats - Htmlwind
Simple stats

Author:
Htmlwind

2 weeks ago

14
Weather info Card
Inspired from Mamba UI

Author:
Ron Hicks

2 years ago

11.5k
Info cards for admin panal

Author:
Sophia Baker

2 years ago

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

7 months ago

980
Simple Kpi
This ui block is meant to be used display Key indicators on an app or website.

Author:
Ranit Saha

5 months ago

568
Info cards for admin panel

Author:
Sophia Baker

2 years ago

11.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components