Framework
Theme
All
217
Typography
14
Sidebars
6
Navbars
13
Tables
8
Components
23
Cards
17
Cards Section
8
Projects Section
3
Teams Section
3
Profiles Section
5
Tables Section
3
Forms
7
Charts
7
Charts Section
3
Headers
12
Testimonials
7
Logo Areas
6
Stats
6
Http Codes
4
Pricing
6
Contact Us
6
Faq
6
Teams
7
Features
6
Call To Actions
8
Authentication
5
Blogs
4
General
1
Contents
6
Tailwind Stats
Discover 6 Tailwind Stats available in Loopple
Requires JavaScript
Stats 1
Component from
Motion Landing Library
Builder
<div class="w-full draggable"> <div class="container flex flex-col items-center gap-16 mx-auto my-32"> <div class="grid w-full grid-cols-1 lg:grid-cols-4 md:grid-cols-2 gap-y-8"> <div class="flex flex-col items-center"> <h3 class="text-5xl font-extrabold leading-tight text-center text-dark-grey-900 font-display"><span id="countto1" countTo="250"></span>+</h3> <p class="text-base font-medium leading-7 text-center text-dark-grey-600">Successful Projects</p> </div> <div class="flex flex-col items-center"> <h3 class="text-5xl font-extrabold leading-tight text-center text-dark-grey-900 font-display">$<span id="countto2" countTo="12"></span>m</h3> <p class="text-base font-medium leading-7 text-center text-dark-grey-600">Annual Revenue Growth</p> </div> <div class="flex flex-col items-center"> <h3 class="text-5xl font-extrabold leading-tight text-center text-dark-grey-900 font-display"><span id="countto3" countTo="2600" data-decimal="1"></span>k+</h3> <p class="text-base font-medium leading-7 text-center text-dark-grey-600">Global Partners</p> </div> <div class="flex flex-col items-center"> <h3 class="text-5xl font-extrabold leading-tight text-center text-dark-grey-900 font-display"><span id="countto4" countTo="18000"></span>+</h3> <p class="text-base font-medium leading-7 text-center text-dark-grey-600">Daily Website Visitors</p> </div> </div> </div> </div>
<script>
let numbers = document.querySelectorAll("[countTo]"); numbers.forEach((number) => { let ID = number.getAttribute("id"); let value = number.getAttribute("countTo"); let countUp = new CountUp(ID, value); if (number.hasAttribute("data-decimal")) { const options = { decimalPlaces: 1, }; countUp = new CountUp(ID, 2.8, options); } else { countUp = new CountUp(ID, value); } if (!countUp.error) { countUp.start(); } else { console.error(countUp.error); number.innerHTML = value; } });
</script>
Requires JavaScript
Stats Section With Title And Description
Requires JavaScript
Stats Section With Numbers And Image
Requires JavaScript
Stats Section With Gradient Image On The Bottom
Requires JavaScript
Stats Section With Numbers And Description For Each Stat
Requires JavaScript
