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

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

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

1 month ago

390
Info cards

Author:
Samuel Dawson

2 years ago

9.7k
Feature overview cards
The component is designed to be responsive, featuring a title, a brief description, and a set of cards presenting key metrics.

Author:
Nikita

1 year ago

4.1k
Calender
Calendar component for showing schedule

Author:
Brandon D

2 years ago

7.4k
Showcase Impactfull stats
stats cards with icons

Author:
Carlos

4 months ago

764
Info cards for admin panal

Author:
Sophia Baker

2 years ago

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

7.5k
Info Card

Author:
Prem..

2 years ago

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

Author:
Prajwal Hallale

1 year ago

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

Author:
Arya

2 years ago

11.2k
Stats block
basic stats section

Author:
Simon Scheffer

2 years ago

9.4k
Information cards for admin panal
Stats cards

Author:
Brandon D

2 years ago

9.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components