Home
Matti
Facts

Facts

Large fact counters with the "centered" title, a quarter overstand to the right site. Die JS-Line set the titles, so you only have to change the text -- and or modify the counters- or the titles background-color.

[VIEW-NOTICE]
If you change the from XS over MD to XL ... right-click here into the showcase and click "reload frame" or test it on you own site directly.

This tailwind example is contributed by Matti, on 03-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Services,Why choose us

Feature showcase

Author Matti

1.5k

Fork Fullscreen

<section class="w-full dark:bg-gray-700 dark:text-white">
  <div class="w-full md:w-5/6 mx-auto">
    <div class="flex flex-col md:flex-row px-2 md:px-6 md:py-12  dark:text-white">
      <div id="tbox1" class="relative w-full md:w-1/4 py-6 px-6 md:mr-6 text-center flex flex-col items-center">
        <h1 class="relative z-10 text-7xl text-emerald-600 md:text-8xl font-semibold">46</h1>
        <div id="sbox1" class="absolute z-20 w-auto px-2">
          <p class="text-sm font-normal bg-white/75 dark:text-gray-800 rounded-md ml-38 p-1">Components</p>
        </div>
      </div>
      <div id="tbox2" class="relative w-full md:w-1/4 py-6 px-6 md:mr-6 text-center flex flex-col items-center">
        <h1 class="relative z-10 text-7xl text-emerald-600 md:text-8xl font-semibold">97</h1>
        <div id="sbox2" class="absolute z-20 w-auto px-2">
          <p class="text-sm font-normal bg-white/75 dark:text-gray-800 rounded-md ml-38 p-1">Followers</p>
        </div>
      </div>
      <div id="tbox3" class="relative w-full md:w-1/4 py-6 px-6 md:mr-6 text-center flex flex-col items-center">
        <h1 class="relative z-10 text-7xl text-emerald-600 md:text-8xl font-semibold">21</h1>
        <div id="sbox3" class="absolute z-20 w-auto px-2">
          <p class="text-sm font-normal bg-white/75 dark:text-gray-800 rounded-md ml-38 p-1">Projects</p>
        </div>
      </div>
      <div id="tbox4" class="relative w-full md:w-1/4 py-6 px-6 md:mr-6 text-center flex flex-col items-center">
        <h1 class="relative z-10 text-7xl text-emerald-600 md:text-8xl font-semibold">35</h1>
        <div id="sbox4" class="absolute z-20 w-auto px-2">
          <p class="text-sm font-normal bg-white/75 dark:text-gray-800 rounded-md ml-38 p-1">Constributors</p>
        </div>
      </div>
    </div>
  </div>
 </section>
<script>for(let i=1;i<5;i++){
    const aa=document.getElementById('tbox'+i).offsetWidth;
    const ab=document.getElementById('tbox'+i).offsetHeight;
    const ba=document.getElementById('sbox'+i).offsetWidth;
    const bb=document.getElementById('sbox'+i).offsetHeight;
    document.getElementById('sbox'+i).style.right=Math.ceil(aa/2)-(Math.ceil(ba/2)*2)+"px";
    document.getElementById('sbox'+i).style.top=Math.ceil(ab/2)-(Math.ceil(bb/2))+"px";
    }
</script>
</section>

Related Examples