<div class="flex justify-center items-center bg-gray-100 w-full min-h-screen text-gray-800">
<div class="rounded-md bg-white shadow w-96 py-6">
<div class="flex items-center w-full px-8 border-b border-gray-100 pb-4"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" viewBox="0 0 16 16" class="text-blue-500 mr-4">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm8-7A8 8 0 1 1 0 8a8 8 0 0 1 16 0z" />
<path fill-rule="evenodd" d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5z" />
</svg>
<div>
<div class="text-sm text-gray-500">Total hours</div>
<div class="text-4xl font-semibold">11:25 h</div>
</div>
</div>
<ul class="px-8 pt-4">
<li class="flex justify-between items-center my-2">
<div class="flex items-center"><span class="w-3 h-3 rounded bg-blue-500 inline-block mr-2"></span> <span>Project 1</span></div>
<div class="font-bold">6:30 h</div>
</li>
<li class="flex justify-between items-center my-2">
<div class="flex items-center"><span class="w-3 h-3 rounded bg-green-500 inline-block mr-2"></span> <span>Project 2</span></div>
<div class="font-bold">2:25 h</div>
</li>
<li class="flex justify-between items-center my-2">
<div class="flex items-center"><span class="w-3 h-3 rounded bg-yellow-500 inline-block mr-2"></span> <span>Project 2</span></div>
<div class="font-bold">1:30 h</div>
</li>
<li class="flex justify-between items-center my-2">
<div class="flex items-center"><span class="w-3 h-3 rounded bg-purple-500 inline-block mr-2"></span> <span>Side-Project</span></div>
<div class="font-bold">1:00 h</div>
</li>
</ul>
</div>
</div>