<section class="py-8">
<div class="container px-4 mx-auto">
<div class="flex flex-wrap -m-4">
<div class="w-full md:w-1/2 lg:w-1/4 p-4">
<div class="pt-6 text-center bg-white rounded">
<h4 class="mb-2 text-xs text-gray-500">Engaged Users</h4>
<p class="mb-1 text-4xl font-bold">1 450</p>
<span class="inline-block py-1 px-2 mb-2 text-xs text-white bg-green-500 rounded-full">+115</span>
<div class="chart" data-type="area-small" data-variant="indigo"></div>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/4 p-4">
<div class="pt-6 text-center bg-white rounded">
<h4 class="mb-2 text-xs text-gray-500">Total Profit</h4>
<p class="mb-1 text-4xl font-bold">$9,054</p>
<span class="inline-block py-1 px-2 mb-2 text-xs text-white bg-red-500 rounded-full">-$1,535</span>
<div class="chart" data-type="area-small" data-variant="blue"></div>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/4 p-4">
<div class="pt-6 text-center bg-white rounded">
<h4 class="mb-2 text-xs text-gray-500">Click Counter</h4>
<p class="mb-1 text-4xl font-bold">73.5%</p>
<span class="inline-block py-1 px-2 mb-2 text-xs text-white bg-green-500 rounded-full">+5.64%</span>
<div class="chart" data-type="area-small" data-variant="green"></div>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/4 p-4">
<div class="pt-6 text-center bg-white rounded">
<h4 class="mb-2 text-xs text-gray-500">Visit Duration</h4>
<p class="mb-1 text-4xl font-bold">0m 50s</p>
<span class="inline-block py-1 px-2 mb-2 text-xs text-white bg-green-500 rounded-full">+15s</span>
<div class="chart" data-type="area-small" data-variant="orange"></div>
</div>
</div>
</div>
</div>
</section>Framework
Tailwind CSS
UI Library
All Libraries
Components
- Alert 101
- Application 103
- Banners 37
- Blog 122
- Call to action 189
- Cards 29
- Careers 28
- Contact 96
- Content 80
- Cookies 92
- Dashboards 13
- E-commerce (orders) 28
- E-commerce (products) 49
- FAQ 86
- Features 215
- Footers 123
- Forms 9
- Graphs 38
- HTTP codes 98
- Hero section 144
- How it works 121
- Logo clouds 150
- Modals 29
- Navbar 209
- Navigation (horizontal) 202
- Navigation (vertical) 7
- Newsletter 104
- Notifications 7
- Paginations 12
- Portfolio 87
- Pricing 119
- Projects 6
- Reviews 10
- Rich text 3
- Sign in / Sign up 155
- Snackbars 10
- Stats 144
- Tables 70
- Team 108
- Testimonials 139
- Users 17
Component #1
Freedom and clarity in presenting data is a key feature of good desig. Tailwind graphs components allow you to choose how to present data in order to reflect key aspects of the data. It is important to vary the appearance of the data presentation if you show more data. This way you will keep the attention of the recipient and the data will be easier to understand. Choose from line graphs, pie charts, bar graphs, and other types of data visualization.
Don't forget to take a look at our stats, tables and workflows components.
On this subpage, you can browse the different Tailwind graphs component themes that are available in our UI libraries. You will also find many other types of components that will follow a similar style. Each of these libraries has been developed by experienced designers along with our in-house development team.
Get access to all Tailwind graphs components, code and our editor. Test the editor demo for free.
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
