counter compteur

This tailwind example is contributed by Omer fils ELENGA, on 07-Nov-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Timer,Time counter

Countdown Timer

Author Omer fils ELENGA

Tailwind v3.4 485

Fork Fullscreen

<section class="stats-section p-4 md:p-6 text-white bg-green-700 relative overflow-hidden">
            <div class="flex flex-wrap">
                <div class="w-full md:w-1/2 lg:w-1/4 py-8 stat-item">
                    <div class="md:border-r stat-divider border-gray-300 px-12 relative z-10">
                        <h2 class="stat-number text-4xl md:text-5xl font-bold text-center">
                            2+
                        </h2>
                        <p class="mb-2 text-center text-lg opacity-90 hover:opacity-100 transition-opacity">Projets menés</p>
                    </div>
                </div>
                <div class="w-full md:w-1/2 lg:w-1/4 py-8 stat-item">
                    <div class="lg:border-r stat-divider border-gray-300 px-12 relative z-10">
                        <h2 class="stat-number text-4xl md:text-5xl font-bold text-center">
                            10+
                        </h2>
                        <p class="mb-2 text-center text-lg opacity-90 hover:opacity-100 transition-opacity">Partenaires</p>
                    </div>
                </div>
                <div class="w-full md:w-1/2 lg:w-1/4 py-8 stat-item">
                    <div class="md:border-r stat-divider border-gray-300 px-12 relative z-10">
                        <h2 class="stat-number text-4xl md:text-5xl font-bold text-center">
                            20+
                        </h2>
                        <p class="mb-2 text-center text-lg opacity-90 hover:opacity-100 transition-opacity">Publications</p>
                    </div>
                </div>
                <div class="w-full md:w-1/2 lg:w-1/4 py-8 stat-item">
                    <div class="px-12 relative z-10">
                        <h2 class="stat-number text-4xl md:text-5xl font-bold text-center">
                            10+
                        </h2>
                        <p class="mb-2 text-center text-lg opacity-90 hover:opacity-100 transition-opacity">Départements couverts</p>
                    </div>
                </div>
            </div>
        </section>