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

2.1k

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

Feature showcase cards

Author:
Lukas Müller

3 years ago

14.4k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
Amit Pachange

3 years ago

52.7k
tailwind services section
display features/services of your product

Author:
L.J. Weber

2 years ago

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

Author:
Alok

2 years ago

14.4k
Services showcase Section
With hover effect on cards

Author:
Anonymous

1 year ago

2.6k
Features Component

Author:
KULDEEP

9 months ago

1.2k
Features showcase section
showcase key features and benefits

Author:
Mereani Waqa

2 years ago

7.5k
accordion with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.4k
Feature Section Cards

Author:
Akram Khan

1 year ago

2.4k
Features section
Showcase your key features

Author:
Manon Daniel

3 years ago

17.2k
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

1 year ago

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

4 months ago

572

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components