Home
Manon Daniel
ExtraLarge stats section

ExtraLarge stats section

This tailwind example is contributed by Manon Daniel, on 04-Jun-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Info, Show info, Statistics

Stats

Author Manon Daniel

12.4k

Fork Fullscreen

<div class="flex flex-wrap items-center justify-center gap-y-2 bg-black">
    
    <div class="px-10 py-4 sm:px-20 ">
        <p
            class="mb-0 whitespace-nowrap bg-gradient-to-b from-white to-gray-400 bg-clip-text text-4xl font-black text-transparent sm:text-6xl">
            24/7
        </p>
        <p class="mt-2 text-center text-lg leading-relaxed tracking-wide text-gray-400">
            Support
        </p>
    </div>

<div class="px-10 py-4 sm:px-20 ">
        <p
            class="mb-0 whitespace-nowrap bg-gradient-to-b from-white to-gray-400 bg-clip-text text-4xl font-black text-transparent sm:text-6xl">
            120 +
        </p>
        <p class="mt-2 text-center text-lg leading-relaxed tracking-wide text-gray-400">
            Customers
        </p>
    </div>

<div class="px-10 py-4 sm:px-20 ">
        <p
            class="mb-0 whitespace-nowrap bg-gradient-to-b from-white to-gray-400 bg-clip-text text-4xl font-black text-transparent sm:text-6xl">
            90
        </p>
        <p class="mt-2 text-center text-lg leading-relaxed tracking-wide text-gray-400">
            Cities
        </p>
    </div>

<div class="px-10 py-4 sm:px-20 ">
        <p
            class="mb-0 whitespace-nowrap bg-gradient-to-b from-white to-gray-400 bg-clip-text text-4xl font-black text-transparent sm:text-6xl">
            99.9 %
        </p>
        <p class="mt-2 text-center text-lg leading-relaxed tracking-wide text-gray-400">
            Uptime
        </p>
    </div>

</div>

Related Examples