ExtraLarge stats section

This tailwind example is contributed by Manon Daniel, on 04-Jun-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Info, Show info, Statistics

Stats

Author Manon Daniel

Tailwind v3.4 14.5k 16

Fork Fullscreen

<div class="flex flex-wrap items-center justify-center gap-y-2 bg-black">
    
    <div class="px-10 py-4 sm:px-20 ">
        <p
            class="mb-0 whitespace-nowrap bg-gradient-to-b from-white to-gray-400 bg-clip-text text-4xl font-black text-transparent sm:text-6xl">
            24/7
        </p>
        <p class="mt-2 text-center text-lg leading-relaxed tracking-wide text-gray-400">
            Support
        </p>
    </div>

<div class="px-10 py-4 sm:px-20 ">
        <p
            class="mb-0 whitespace-nowrap bg-gradient-to-b from-white to-gray-400 bg-clip-text text-4xl font-black text-transparent sm:text-6xl">
            120 +
        </p>
        <p class="mt-2 text-center text-lg leading-relaxed tracking-wide text-gray-400">
            Customers
        </p>
    </div>

<div class="px-10 py-4 sm:px-20 ">
        <p
            class="mb-0 whitespace-nowrap bg-gradient-to-b from-white to-gray-400 bg-clip-text text-4xl font-black text-transparent sm:text-6xl">
            90
        </p>
        <p class="mt-2 text-center text-lg leading-relaxed tracking-wide text-gray-400">
            Cities
        </p>
    </div>

<div class="px-10 py-4 sm:px-20 ">
        <p
            class="mb-0 whitespace-nowrap bg-gradient-to-b from-white to-gray-400 bg-clip-text text-4xl font-black text-transparent sm:text-6xl">
            99.9 %
        </p>
        <p class="mt-2 text-center text-lg leading-relaxed tracking-wide text-gray-400">
            Uptime
        </p>
    </div>

</div>

Related Examples

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

Dika Rahman

2 years ago

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

Gidy Official

11 months ago

665
Dash.OS: Drag & Drop Dashboard Widget System
A fully interactive, freeform dashboard builder for the browser. Drop in widgets, drag them anywhere, resize to fit, and your layout is automatically remembered. Ships with a live Chart.js revenue chart, KPI stats, a task tracker, and a notifications feed, all in a single zero-dependency HTML file with dark/light mode built in.

Ijila Itunu

7 months ago

982
Tailwind stat cards
Highlight key statistics

Anonymous

3 years ago

11.1k
Responsive Card Grid with hover animation

Prashant

4 years ago

20.7k
Basic stat cards

Santos78

3 years ago

12.5k
Statastics cards

Shakti

3 years ago

15.3k
Showcase Impactfull stats
stats cards with icons

Carlos

2 years ago

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

Prajwal Hallale

3 years ago

7.9k
Project stats section

Carlos

2 years ago

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

Santos78

3 years ago

12.9k
Responsive data cards

EliteAI Tools

1 year ago

2.3k