Home
Santos78
Basic stat cards

Basic stat cards

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

Stats

Author Santos78

11.1k

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

Author:
Task Master

2 years ago

12.7k
Tailwind stat cards
Highlight key statistics

Author:
Anonymous

2 years ago

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

Author:
Arya

2 years ago

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

Author:
Santos78

2 years ago

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

1 year ago

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

Author:
Dika Rahman

11 months ago

1.5k
Stats - Htmlwind
Simple stats

Author:
Htmlwind

3 months ago

363
Stats - Big and Bold
display stats of your product

Author:
Pixel Perfect

1 year ago

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

Author:
Abhiraj

8 months ago

708
stepper
The Stepper Component is a versatile and user-friendly tool designed to guide users through a sequence of steps. Whether you're building a multi-step form, a tutorial, or any process that requires sequential navigation, this component makes it easy to implement and customize.

Author:
Abhiraj

7 months ago

1.2k
Info cards

Author:
Lukas Müller

2 years ago

11.5k
Statistics card section

Author:
Laurits

2 years ago

17.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components