Usage Stats

            <div class="flex justify-center items-center bg-gray-100 w-full min-h-screen text-gray-800">
  <div class="rounded-2xl bg-white shadow w-96 p-6">
    <h1 class="text-lg font-semibold">My Drive</h1>
    <p class="text-gray-600 mb-4">View the usage of your online drive with transparency.</p>
    <ul>
      <li class="mb-4">
        <h2 class="mb-1 font-semibold">Documents</h2>
        <div class="flex justify-between text-sm text-gray-500"><span>2.74 GB</span> <span>5 GB</span></div>
        <div class="relative h-2 w-full rounded-full bg-gray-200">
          <div class="h-2 absolute rounded-full bg-green-500 w-7/12"></div>
        </div>
      </li>
      <li class="mb-4">
        <h2 class="mb-1 font-semibold">Pictures</h2>
        <div class="flex justify-between text-sm text-gray-500"><span>9.2 GB</span> <span>10 GB</span></div>
        <div class="relative h-2 w-full rounded-full bg-gray-200">
          <div class="h-2 absolute rounded-full bg-red-500 w-11/12"></div>
        </div>
      </li>
      <li class="mb-4">
        <h2 class="mb-1 font-semibold">Archives</h2>
        <div class="flex justify-between text-sm text-gray-500"><span>3.95 GB</span> <span>5 GB</span></div>
        <div class="relative h-2 w-full rounded-full bg-gray-200">
          <div class="h-2 absolute rounded-full bg-yellow-500 w-10/12"></div>
        </div>
      </li>
    </ul>
  </div>
</div>