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

3.1k

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

Landi page template
con un cuerpo libre

Author:
Raul antonio de la cruz hernandez

4 weeks ago

46
Info Card

Author:
Prem..

3 years ago

20k
stats

Author:
Raul antonio de la cruz hernandez

4 weeks ago

124
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

2 years ago

8.6k
Info card for admin panal
Show stats on your dashboard

Author:
Arya

3 years ago

13.1k
machine
tell you how your MAC pc work

Author:
gidy

2 months ago

216
Stats Showcase Section
Display key metrics of your product or service beautifully

Author:
Mereani Waqa

2 years ago

5.8k
Stats block
basic stats section

Author:
Simon Scheffer

3 years ago

10.3k
Info cards

Author:
Lukas Müller

2 years ago

11.6k
Info cards

Author:
Samuel Dawson

2 years ago

11k
Block Group kpis

Author:
Ranit Saha

1 year ago

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

Author:
Arya

3 years ago

12.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components