Statastics cards

This tailwind example is contributed by Shakti, on 08-Jun-2023. 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 Shakti

Tailwind v3.4 15.3k 15

Fork Fullscreen

<div class="mb-12 text-center md:mb-0 md:border-r-2 dark:md:border-slate-500">
            <div class="font-heading text-[2.6rem] font-bold dark:text-white lg:text-5xl xl:text-6xl">
                13.3K
            </div>
            <p class="text-sm font-medium uppercase tracking-widest text-gray-800 dark:text-slate-400 lg:text-base">
                Downloads
            </p>
        </div>

<div class="mb-12 text-center md:mb-0 md:border-r-2 dark:md:border-slate-500">
            <div class="font-heading text-[2.6rem] font-bold dark:text-white lg:text-5xl xl:text-6xl">
                25
            </div>
            <p class="text-sm font-medium uppercase tracking-widest text-gray-800 dark:text-slate-400 lg:text-base">
                Stars
            </p>
        </div>

<div class="mb-12 text-center md:mb-0 md:border-r-2 dark:md:border-slate-500">
            <div class="font-heading text-[2.6rem] font-bold dark:text-white lg:text-5xl xl:text-6xl">
                1.8K
            </div>
            <p class="text-sm font-medium uppercase tracking-widest text-gray-800 dark:text-slate-400 lg:text-base">
                Forks
            </p>
        </div>

<div class="mb-12 text-center md:mb-0 md:border-r-2 dark:md:border-slate-500">
            <div class="font-heading text-[2.6rem] font-bold dark:text-white lg:text-5xl xl:text-6xl">
                484K
            </div>
            <p class="text-sm font-medium uppercase tracking-widest text-gray-800 dark:text-slate-400 lg:text-base">
                Users
            </p>
        </div>

</div>