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>