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

Features grid example
Tailwind clean and responsive features section with the heading

Author:
Alok

2 years ago

13.8k
Product Feature Section
present multiple product features in a grid layout. Each feature is represented by an icon, title, and description.

Author:
Elsabe Fourie

1 year ago

9.1k
SaaS Feature Section
It has a Gradient text headline and CTA buttons

Author:
Junclarkaizen Pagu

2 years ago

9.1k
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

7 months ago

1.4k
Feature showcase with images

Author:
Amit Pachange

2 years ago

13.7k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

6 months ago

316
Warb feature
Here another idea... [update] - mobile device fixed (curr iPh, Smg)

Author:
Matti

10 months ago

2.2k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Author:
Amit Pachange

1 year ago

4.7k
Multi step form with tailwindcss and alpinejs

Author:
Michael Andreuzza

1 year ago

2.5k
Feature cards
Feature showcase

Author:
Steven Kuhn

3 years ago

10.1k
countdown with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.1k
Basic features section
Display your most important features

Author:
Dipti narayan

2 years ago

7.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components