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.7k

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

Layout switcher with tailwindcss and alpinejs

Author:
Michael Andreuzza

1 year ago

1.2k
Features
A clean, responsive feature section with icons, smooth hover effects, soft backgrounds, and clear titles for modern website designs.

Author:
SAURAV SINGH

6 months ago

420
Feature cards with icons on top

Author:
Manon Daniel

2 years ago

17k
Feature Cards Section
showcase key features or benefits with cards.

Author:
Anonymous

2 years ago

4k
Palette2

Author:
Lasse Strand Ringvold

14 hours ago

4
Services
Card Services Section. find it makecomponents.com

Author:
makecomponents

1 year ago

2.2k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Author:
Ayyamperumal S

1 month ago

214
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

1 year ago

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

Author:
Amit Pachange

1 year ago

5k
Portfolio with buttons
Portfolio with buttons. Portfolio item has image, title and description.

Author:
Mike Varen

1 year ago

3.9k
Animated Feature Grid Component with Tailwind CSS
Animated feature grid component built with Tailwind CSS. Features smooth hover animations, gradient cards, dark mode support, and responsive design. Perfect for showcasing product features.

Author:
Homayoun

1 month ago

331
Product feature showccase section with images

Author:
R.P Ketan

2 years ago

16.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components