Basic stat cards

This tailwind example is contributed by Santos78, on 13-Mar-2023. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Info, Show info, Statistics

Stats

Author Santos78

Tailwind v3.4 12.5k 10

Fork Fullscreen

<div class="bg-gray-200 h-screen w-screen">
    <div class="grid gap-4 lg:gap-8 md:grid-cols-3 p-8 pt-20">
        
        <div class="relative p-6 rounded-2xl bg-white shadow dark:bg-gray-800">
            <div class="space-y-2">
                <div
                    class="flex items-center space-x-2 rtl:space-x-reverse text-sm font-medium text-gray-500 dark:text-gray-200">
                    <span>Total Products</span>
                </div>

</div>

<span>Product Inventory</span>
                </div>

</div>

<span>Average price</span>
                </div>

</div>

</div>
    </div>
</div>

Related Examples

Tiles for showing stats

Task Master

3 years ago

13.8k
Tailwind stat cards
Highlight key statistics

Anonymous

3 years ago

11.1k
Info cards for admin panel
Display various Infos and statatics in admin panel with these cards

Arya

3 years ago

12.7k
Responsive Info cards for admin panel
Show stats to the admin dashboard

Santos78

3 years ago

12.9k
ExtraLarge stats section

Manon Daniel

3 years ago

14.3k
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.

Hyun-woo Cho

3 years ago

9k
Stats block
basic stats section

Simon Scheffer

3 years ago

10.9k
Info cards

Samuel Dawson

3 years ago

11.5k
Project stats section

Carlos

2 years ago

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

Santiago Hernandez

2 years ago

3.6k
Showcase Impactfull stats
stats cards with icons

Carlos

1 year ago

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.

Gidy Official

10 months ago

662