Home
Paul Intay
Service Metrics cards

Service Metrics cards

This tailwind example is contributed by Paul Intay, on 29-Feb-2024. 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 Paul Intay

2.9k

Fork Fullscreen

<section class="bg-white">
    <div class="px-4 py-8 mx-auto max-w-screen-xl sm:py-16 lg:px-6 xl:px-0 dark:bg-gray-900">
        <div class="mx-auto mb-8 max-w-screen-md text-center md:mb-16">
            <h2 class="text-3xl tracking-tight font-extrabold text-gray-900 md:text-4xl dark:text-white">
                Trusted around
                the world
            </h2>

</div>
        <div class="mb-4 space-y-4 md:grid md:grid-cols-3 md:gap-4 xl:gap-16 md:space-y-0 md:mb-8">
            <div class="flex justify-center items-center p-6 text-center bg-gray-100 rounded xl:p-12 dark:bg-gray-800">
                <div class="text-gray-900 dark:text-white">
                    <p class="mb-2 text-4xl font-extrabold md:text-5xl">24,837</p>
                    <h3 class="mb-2 text-xl font-semibold">Interactions</h3>
                    <p class="font-light text-gray-500 dark:text-gray-400">Engagements recorded</p>
                </div>
            </div>
            <div class="flex justify-center items-center p-6 text-center bg-gray-100 rounded xl:p-12 dark:bg-gray-800">
                <div class="text-gray-900 dark:text-white">
                    <p class="mb-2 text-4xl font-extrabold md:text-5xl">590</p>
                    <h3 class="mb-2 text-xl font-semibold">Enterprise Clients</h3>
                    <p class="font-light text-gray-500 dark:text-gray-400">Served</p>
                </div>
            </div>
            <div class="flex justify-center items-center p-6 text-center bg-gray-100 rounded xl:p-12 dark:bg-gray-800">
                <div class="text-gray-900 dark:text-white">
                    <p class="mb-2 text-4xl font-extrabold md:text-5xl">1,234</p>
                    <h3 class="mb-2 text-xl font-semibold">Active Users</h3>
                    <p class="font-light text-gray-500 dark:text-gray-400">On our platform</p>
                </div>
            </div>
        </div>
        <p class="text-sm font-light text-center text-gray-500 dark:text-gray-400">
            Last updated at Feb. 29, 2024, 7:12 p.m.
        </p>
    </div>
</section>

Related Examples

Stats - Big and Bold
display stats of your product

Author:
Pixel Perfect

1 year ago

1.5k
Info cards grid with icons
Evenly-sized cards for showing various stats on the user/admin dashboard.

Author:
Prajwal Hallale

2 years ago

7.8k
Calender
Calendar component for showing schedule

Author:
Brandon D

3 years ago

8.1k
Block Group kpis

Author:
Ranit Saha

9 months ago

541
Big stat card
Display your statistics boldly

Author:
Nikita

1 year ago

3.5k
Tailwind stat cards
Highlight key statistics

Author:
Anonymous

2 years ago

10.1k
Stats block
basic stats section

Author:
Simon Scheffer

2 years ago

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

Author:
Arya

3 years ago

12k
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

2 years ago

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

Author:
Dika Rahman

1 year ago

1.5k
Information card

Author:
Samuel Dawson

2 years ago

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

9 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components