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

3.5k

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

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

Author:
Arya

3 years ago

12k
Simple Kpi
This ui block is meant to be used display Key indicators on an app or website.

Author:
Ranit Saha

9 months ago

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

Author:
Arya

3 years ago

12.9k
Stats cards for admin panel
This Component is designed to present statistics in a tile format. It comprises a title, a large numeric value, and an icon, creating an eye-catching way to display data.

Author:
Prajwal Hallale

2 years ago

6.8k
Stats block
basic stats section

Author:
Simon Scheffer

2 years ago

10.2k
Tailwind stat cards
Highlight key statistics

Author:
Anonymous

2 years ago

10.1k
Statastics cards

Author:
Shakti

2 years ago

14.5k
Metrics overview cards
stat cards

Author:
Quentin Rivers

1 year ago

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

Author:
Prajwal Hallale

2 years ago

7.8k
Service Metrics cards

Author:
Paul Intay

1 year ago

2.9k
Stats Showcase
Tiles showcasing noteworthy achievements or metrics.

Author:
Andrew Hughes

2 years ago

9.4k
Block Group kpis

Author:
Ranit Saha

9 months ago

541

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components