Big stat card

Display your statistics boldly

This tailwind example is contributed by Nikita, on 24-Jan-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Info, Show info, Statistics

Stats

Author Nikita

Tailwind v3.4 4.5k 9

Fork Fullscreen

<section id="comparison" aria-label="QuickEdit vs traditional editor" class="bg-slate-50 dark:bg-gray-800 py-20 sm:py-32">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="mx-auto max-w-2xl md:text-center">
            <h2 class="font-display text-3xl tracking-tight text-slate-900 dark:text-white sm:text-4xl">The Faster, Affordable, Better
                Solution</h2>
            <p class="mt-4 text-lg tracking-tight text-slate-700 dark:text-gray-300">Discover the advantages of choosing QuickEdit over a
                traditional editor. Say goodbye to delays and elevate your content creation process.</p>
        </div>
        <ul role="list"
            class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 sm:gap-8 lg:mt-20 lg:max-w-none lg:grid-cols-3">
            <li>
                <ul role="list" class="flex flex-col gap-y-6 sm:gap-y-8">
                    <li>
                        <figure class="relative rounded-2xl bg-white dark:bg-gray-900 p-6 text-center shadow-xl shadow-slate-900/10">
                            <blockquote class="relative p-3">
                                <p class="text-6xl font-bold tracking-tight text-slate-900 dark:text-white">98%</p>
                            </blockquote>
                            <figcaption class="text-center">
                                <div class="font-display text-slate-900 dark:text-white"> ✅ faster than a traditional editor </div>
                            </figcaption>
                        </figure>
                    </li>
                </ul>
            </li>
            <li>
                <ul role="list" class="flex flex-col gap-y-6 sm:gap-y-8">
                    <li>
                        <figure class="relative rounded-2xl bg-white dark:bg-gray-900 p-6 text-center shadow-xl shadow-slate-900/10">
                            <blockquote class="relative p-3">
                                <p class="text-6xl font-bold tracking-tight text-slate-900 dark:text-white">85%</p>
                            </blockquote>
                            <figcaption class="text-center">
                                <div class="font-display text-slate-900 dark:text-white">💰 more affordable than a traditional editor
                                </div>
                            </figcaption>
                        </figure>
                    </li>
                </ul>
            </li>
            <li>
                <ul role="list" class="flex flex-col gap-y-6 sm:gap-y-8">
                    <li>
                        <figure class="relative rounded-2xl bg-white dark:bg-gray-900 p-6 text-center shadow-xl shadow-slate-900/10">
                            <blockquote class="relative p-3">
                                <p class="text-6xl font-bold tracking-tight text-slate-900 dark:text-white">120%</p>
                            </blockquote>
                            <figcaption class="text-center">
                                <div class="font-display text-slate-900 dark:text-white">😎 increased efficiency and features</div>
                            </figcaption>
                        </figure>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</section>

Related Examples

stats

Raul antonio de la cruz hernandez

9 months ago

412
Info cards

Samuel Dawson

3 years ago

11.6k
Info Card

Prem..

4 years ago

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

Santiago Hernandez

2 years ago

3.7k
Showcase Impactfull stats
stats cards with icons

Carlos

2 years ago

2k
Info card

Samuel Dawson

3 years ago

10.7k
How does it work?

Abdul Baset Bappy

1 year ago

1.3k
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
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
Engineering Project Dashboard
Track engineering assignments, project progress, technology stack, and delivery timelines in one simple dashboard.

Ayyamperumal S

7 months ago

535
Weather info Card
Inspired from Mamba UI

Ron Hicks

4 years ago

12.8k
Tailwind stat cards
Highlight key statistics

Anonymous

3 years ago

11.1k