Framework
Theme
All
217
Headers
12
Testimonials
7
Logo Areas
6
Stats
6
Http Codes
4
Navbars
13
Pricing
6
Contact Us
6
Faq
6
Teams
7
Features
6
Call To Actions
8
Authentication
5
Blogs
4
General
1
Contents
6
Sidebars
6
Components
23
Cards Section
8
Forms
7
Tables Section
3
Typography
14
Teams Section
3
Profiles Section
5
Tables
8
Cards
17
Projects Section
3
Charts
7
Charts Section
3
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
