Framework
Theme
All
217
Sidebars
6
Components
23
Cards Section
8
Forms
7
Navbars
13
Tables Section
3
Typography
14
Teams Section
3
Profiles Section
5
Tables
8
Cards
17
Projects Section
3
Charts
7
Headers
12
Charts Section
3
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
