<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 101
- Application 103
- Banners 73
- Benefits 16
- Blog 122
- Breadcrumbs 24
- Call to action 189
- Cards 29
- Careers 28
- Confirmation 6
- Contact 96
- Content 80
- Cookies 92
- Dashboards 13
- E-commerce (orders) 35
- E-commerce (products) 54
- FAQ 86
- Features 215
- Footers 136
- Forms 9
- Gallery 22
- Graphs 38
- HTTP codes 98
- Hero section 152
- How it works 121
- Instagram photos 5
- Logo clouds 170
- Modals 29
- Navbar 209
- Navigation (horizontal) 208
- Navigation (vertical) 7
- Newsletter 118
- Notifications 7
- Paginations 12
- Portfolio 87
- Pricing 119
- Product info 5
- Projects 6
- Reviews 26
- Rich text 3
- Sign in / Sign up 165
- Snackbars 10
- Stats 144
- Tables 70
- Team 108
- Testimonials 139
- Users 17
Component #1
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
