<section class="bg-coolGray-50 py-4">
<div class="container px-4 mx-auto">
<div class="mx-auto h-full border border-coolGray-100 overflow-hidden bg-white rounded-md shadow-dashboard">
<div class="p-6 pb-18 border-b border-coolGray-100">
<h2 class="mb-18 text-coolGray-900 text-lg font-semibold">Task distribution</h2>
<div class="chart-chart1-pie"></div>
</div>
<div class="flex flex-wrap divide-y md:divide-y-0 md:divide-x divide-coolGray-100 text-center">
<div class="w-full md:w-1/2">
<div class="p-6">
<h3 class="text-2xl text-coolGray-900 font-semibold">1024</h3>
<p class="text-xs text-coolGray-500 font-medium">New tasks</p>
</div>
</div>
<div class="w-full md:w-1/2">
<div class="p-6">
<h3 class="text-2xl text-coolGray-900 font-semibold">442</h3>
<p class="text-xs text-coolGray-500 font-medium">Completed tasks</p>
</div>
</div>
</div>
</div>
</div>
</section>Framework
Tailwind CSS
UI Library
All Libraries
Components
- Alert 88
- Application 85
- Banner 28
- Blog 105
- Call to action 158
- Cards 24
- Careers 20
- Charts 3
- Contact 81
- Content 70
- Cookies 84
- E-commerce (orders) 28
- E-commerce (products) 49
- FAQ 71
- Features 175
- Footers 106
- Forms 6
- Graphs 28
- HTTP codes 83
- Headers 127
- How it works 104
- Logo clouds 131
- Modals 14
- Navbar 116
- Navigation (horizontal) 164
- Navigation (vertical) 2
- Newsletter 92
- Notifications 4
- Portfolio 82
- Pricing 99
- Reviews 10
- Rich text 3
- Section headings 72
- Sign in / Sign up 125
- Stats 126
- Tables 64
- Team 91
- Testimonials 112
- Users 17
Component #1
Charts Components by Shuffle
Choose from 3 variations of Tailwind application components. Presented here are variants available in various UI libraries.
Get access to all Tailwind application components, code and our visual editor. Try the demo for free!
Component #2
Component #3
