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