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

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

Author:
Arya

3 years ago

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

2 years ago

5.4k
Big stat card
Display your statistics boldly

Author:
Nikita

2 years ago

4.2k
Daily growth chart
chart for showing data each day of the week

Author:
Samuel Dawson

3 years ago

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

Author:
Gidy Official

3 months ago

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

Author:
Prajwal Hallale

2 years ago

7.9k
machine
tell you how your MAC pc work

Author:
gidy

3 months ago

336
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.7k
sidebar dash
sidebar dash

Author:
Omer fils ELENGA

2 months ago

333
Showcase Impactfull stats
stats cards with icons

Author:
Carlos

1 year ago

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

Author:
Dika Rahman

1 year ago

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

Author:
Santiago Hernandez

1 year ago

3.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components