Home
Nikita
Big stat card

Big stat card

Display your statistics boldly

This tailwind example is contributed by Nikita, on 24-Jan-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 Nikita

4.2k

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

Basic stat cards

Author:
Santos78

3 years ago

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

Author:
Dika Rahman

1 year ago

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

Author:
Santos78

2 years ago

12.4k
Tailwind stat cards
Highlight key statistics

Author:
Anonymous

2 years ago

10.7k
machine
tell you how your MAC pc work

Author:
gidy

4 months ago

337
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

3 years ago

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

Author:
Mereani Waqa

2 years ago

6k
Block Group kpis

Author:
Ranit Saha

1 year ago

682
Weather info Card
Inspired from Mamba UI

Author:
Ron Hicks

3 years ago

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

4 months ago

348
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
Service Metrics cards

Author:
Paul Intay

2 years ago

3.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components