<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>