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>