<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
Tailwind CSS
UI Library
All Libraries
Components
- Alert 80
- Application 80
- Banner 20
- Blog 100
- Call to action 152
- Careers 20
- Contact 76
- Content 65
- Cookies 79
- E-commerce (orders) 28
- E-commerce (products) 49
- FAQ 66
- Features 170
- Footers 100
- Graphs 19
- HTTP codes 77
- Headers 122
- How it works 99
- Logo clouds 120
- Modals 8
- Navbar 44
- Navigation (horizontal) 146
- Navigation (vertical) 2
- Newsletter 87
- Portfolio 77
- Pricing 94
- Reviews 10
- Rich text 3
- Sign in / Sign up 120
- Stats 115
- Tables 56
- Team 85
- Testimonials 107
- Users 17
Component #1
In presenting data, it is important not to bore your audience. When showing larger data sets, it's a good idea to vary the presentation to keep users' attention. You can achieve this with a variety of ways to show data through our Tailwind component stats. Highlight the most important data and choose the right presentation for each data type!
Choose from many variations of the Tailwind components stats. The variants shown here are available in various UI libraries in the Shuffle editor. You will also find many other types of components that will be in the same style. This will allow you to build a comprehensive Tailwind website template. Each library is designed by a professional designer and coded by our team of developers.
Get access to all sections of the Tailwind components stats, code and our editor. Try the demo for free.
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
