<section class="py-20 2xl:py-40 bg-gray-800">
<div class="container px-4 mx-auto">
<div>
<div class="flex flex-wrap -mx-6 lg:-mx-14">
<div class="w-full md:w-1/2 lg:w-1/4 px-6 lg:px-14 mb-16 lg:mb-0">
<div class="relative flex items-center justify-center mb-10 w-20 h-20">
<img class="absolute inset-0 w-full h-full" src="zospace-assets/lines/circle-chart.svg" alt="">
<p class="text-2xl font-bold text-white">
<span>8</span>
<span class="text-base">%</span>
</p>
</div>
<div class="py-px mb-12 bg-gray-500"></div>
<h3 class="mt-12 mb-8 text-lg font-bold font-heading text-white">New tools</h3>
<p class="text-lg text-gray-200">The brown me quam, sagittis porttitor lorem vel, commodo fringilla nisl.</p>
</div>
<div class="w-full md:w-1/2 lg:w-1/4 px-6 lg:px-14 mb-16 lg:mb-0">
<div class="relative flex items-center justify-center mb-10 w-20 h-20">
<img class="absolute inset-0 w-full h-full" src="zospace-assets/lines/circle-chart-purple.svg" alt="">
<p class="text-2xl font-bold text-white">
<span>45</span>
<span class="text-base">%</span>
</p>
</div>
<div class="py-px mb-12 bg-gray-500"></div>
<h3 class="mt-12 mb-8 text-lg font-bold font-heading text-white">Workshops</h3>
<p class="text-lg text-gray-200">It’s over, maecenas tincidunt malesuada dolor sit amet malesuada.</p>
</div>
<div class="w-full md:w-1/2 lg:w-1/4 px-6 lg:px-14 mb-16 md:mb-0">
<div class="relative flex items-center justify-center mb-10 w-20 h-20">
<img class="absolute inset-0 w-full h-full" src="zospace-assets/lines/circle-chart-green.svg" alt="">
<p class="text-2xl font-bold text-white">
<span>5</span>
<span class="text-base">/6</span>
</p>
</div>
<div class="py-px mb-12 bg-gray-500"></div>
<h3 class="mt-12 mb-8 text-lg font-bold font-heading text-white">Meetings</h3>
<p class="text-lg text-gray-200">The time, this accumsan augue, posuere posuere elit lorem.</p>
</div>
<div class="w-full md:w-1/2 lg:w-1/4 px-6 lg:px-14">
<div class="relative flex items-center justify-center mb-10 w-20 h-20">
<img class="absolute inset-0 w-full h-full" src="zospace-assets/lines/circle-chart-pink.svg" alt="">
<p class="text-2xl font-bold text-white">
<span>79</span>
<span class="text-base">%</span>
</p>
</div>
<div class="py-px mb-12 bg-gray-500"></div>
<h3 class="mt-12 mb-8 text-lg font-bold font-heading text-white">Webinars</h3>
<p class="text-lg text-gray-200">Again and again vehicula libero at nibh volutpat lacinia non sed you see.</p>
</div>
</div>
</div>
</div>
</section>Framework
All Frameworks
UI Library
Zospace
Components
Component #1
Component #2
Component #3
Component #4
Component #5
Stats Components by Shuffle
Choose from 10 variations of Stats UI components. Presented here are variants available in Zospace library.
You will also find many other types of components in Shuffle Editor that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.
Get access to all Stats UI components, code and our visual editor. Try the demo for free!
