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

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

Progress Bar
A progress bar is a UI element that visually represents the completion status of a task or process. It helps users understand how much of a task has been completed and how much remains. Commonly used in forms, file uploads, loading screens, or multi-step processes, it enhances the user experience by providing clear feedback.

Author:
Abhiraj

1 year ago

923
Info card for admin panal
Show stats on your dashboard

Author:
Arya

3 years ago

13.1k
Basic stat cards

Author:
Santos78

2 years ago

11.4k
Service Metrics cards

Author:
Paul Intay

1 year ago

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

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

Author:
Ranit Saha

1 year ago

1.5k
Stats Showcase
Tiles showcasing noteworthy achievements or metrics.

Author:
Andrew Hughes

2 years ago

9.7k
Info card

Author:
Samuel Dawson

3 years ago

10.2k
Stats or Metrics Overview
Highlight your achievements with our Stats Section, featuring key metrics such as years of experience, happy clients, completed projects, and awards. This visually engaging component effectively communicates your expertise and success at a glance

Author:
Anum Shahana

1 year ago

1.3k
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

3 years ago

10.5k
Stats Section Dark

Author:
Santiago Hernandez

1 year ago

1.9k
Stats - Htmlwind
Simple stats

Author:
Htmlwind

8 months ago

831

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components