Time Tracker

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