Welcome back!
<div class="relative max-w-sm mx-auto p-6 mb-6 rounded-xl bg-gray-700 shadow-xl">
<div class="pt-4 pb-8">
<h2 class="font-bold leading-none text-2xl mb-10">Welcome back!</h2>
<label class="block mb-6">
<span class="sr-only">Email address</span>
<input type="email" class="bg-transparent block w-full p-2 border-0 border-b-2 border-opacity-40 focus:ring-0 focus:border-opacity-100 placeholder-current transition-colors duration-200 border-gray-50 focus:border-cyan-400" placeholder="email address">
</label>
<label class="block">
<span class="sr-only">Password</span>
<div class="relative">
<input id="card-login-password" type="password" class="bg-transparent block w-full p-2 pr-12 border-0 border-b-2 border-opacity-40 focus:ring-0 focus:border-opacity-100 placeholder-current transition-colors duration-200 border-gray-50 focus:border-cyan-400" placeholder="password">
<button class="absolute right-0 top-0 h-full w-10 z-10 transition-opacity opacity-0 pointer-events-none" aria-controls="card-login-password" aria-label="Show password" aria-pressed="false">
<svg aria-hidden="true" data-prefix="fal" data-icon="eye-slash" class="svg-inline--fa fa-eye-slash fa-w-20 absolute w-4 h-4 top-3 right-3 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<path fill="currentColor" d="M637 485.25L23 1.75A8 8 0 0011.76 3l-10 12.51A8 8 0 003 26.75l614 483.5a8 8 0 0011.25-1.25l10-12.51a8 8 0 00-1.25-11.24zM320 96a128.14 128.14 0 01128 128c0 21.62-5.9 41.69-15.4 59.57l25.45 20C471.65 280.09 480 253.14 480 224c0-36.83-12.91-70.31-33.78-97.33A294.88 294.88 0 01576.05 256a299.73 299.73 0 01-67.77 87.16l25.32 19.94c28.47-26.28 52.87-57.26 70.93-92.51a32.35 32.35 0 000-29.19C550.3 135.59 442.94 64 320 64a311.23 311.23 0 00-130.12 28.43l45.77 36C258.24 108.52 287.56 96 320 96zm60.86 146.83A63.15 63.15 0 00320 160c-1 0-1.89.24-2.85.29a45.11 45.11 0 01-.24 32.19zm-217.62-49.16A154.29 154.29 0 00160 224a159.39 159.39 0 00226.27 145.29L356.69 346c-11.7 3.53-23.85 6-36.68 6A128.15 128.15 0 01192 224c0-2.44.59-4.72.72-7.12zM320 416c-107.36 0-205.47-61.31-256-160 17.43-34 41.09-62.72 68.31-86.72l-25.86-20.37c-28.48 26.28-52.87 57.25-70.93 92.5a32.35 32.35 0 000 29.19C89.71 376.41 197.07 448 320 448a311.25 311.25 0 00130.12-28.43l-29.25-23C389.06 408.84 355.15 416 320 416z"></path>
</svg>
</button>
</div>
</label>
<div class="mt-4">
<a href="#" class="text-xs font-medium text-gray-200">Forgot password?</a>
</div>
<button class="transition bg-cyan-400 text-cyan-900 hover:bg-cyan-500 hover:text-cyan-900 absolute -bottom-6 right-6 w-32 h-12 flex items-center justify-center p-4 rounded-lg font-bold">Login</button>
</div>
</div><div class="max-w-sm mx-auto p-6 rounded-xl bg-gray-700">
<div>
<label class="block mb-8">
<span class="sr-only">Full name</span>
<div class="relative">
<svg aria-hidden="true" data-prefix="fal" data-icon="user" class="svg-inline--fa fa-user fa-w-14 absolute w-4 h-4 top-3 left-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor" d="M313.6 288c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4zM416 464c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16v-41.6C32 365.9 77.9 320 134.4 320c19.6 0 39.1 16 89.6 16 50.4 0 70-16 89.6-16 56.5 0 102.4 45.9 102.4 102.4V464zM224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm0-224c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"></path>
</svg>
<input type="text" class="border-transparent mt-1 pl-12 block w-full rounded-md shadow-sm bg-gray-800 placeholder-gray-100 focus:border-cyan-400 focus:ring-cyan-400" placeholder="Full name">
</div>
</label>
<label class="block mb-8">
<span class="sr-only">Email address</span>
<div class="relative">
<svg aria-hidden="true" data-prefix="fal" data-icon="envelope" class="svg-inline--fa fa-envelope fa-w-16 absolute w-4 h-4 top-3 left-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM48 96h416c8.8 0 16 7.2 16 16v41.4c-21.9 18.5-53.2 44-150.6 121.3-16.9 13.4-50.2 45.7-73.4 45.3-23.2.4-56.6-31.9-73.4-45.3C85.2 197.4 53.9 171.9 32 153.4V112c0-8.8 7.2-16 16-16zm416 320H48c-8.8 0-16-7.2-16-16V195c22.8 18.7 58.8 47.6 130.7 104.7 20.5 16.4 56.7 52.5 93.3 52.3 36.4.3 72.3-35.5 93.3-52.3 71.9-57.1 107.9-86 130.7-104.7v205c0 8.8-7.2 16-16 16z"></path>
</svg>
<input type="email" class="border-transparent mt-1 pl-12 block w-full rounded-md shadow-sm bg-gray-800 placeholder-gray-100 focus:border-cyan-400 focus:ring-cyan-400" placeholder="Email address">
</div>
</label>
<label class="block">
<span class="sr-only"> Password</span>
<div class="relative">
<svg aria-hidden="true" data-prefix="fal" data-icon="lock" class="svg-inline--fa fa-lock fa-w-14 absolute w-4 h-4 top-3 left-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor" d="M400 224h-16v-62.5C384 73.1 312.9.3 224.5 0 136-.3 64 71.6 64 160v64H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zM96 160c0-70.6 57.4-128 128-128s128 57.4 128 128v64H96v-64zm304 320H48c-8.8 0-16-7.2-16-16V272c0-8.8 7.2-16 16-16h352c8.8 0 16 7.2 16 16v192c0 8.8-7.2 16-16 16z"></path>
</svg>
<input id="card-signup-password" type="password" class="border-transparent mt-1 px-12 block w-full rounded-md shadow-sm bg-gray-800 placeholder-gray-100 focus:border-cyan-400 focus:ring-cyan-400" placeholder="Password">
<button class="absolute right-0 top-0 h-full w-10 z-10 transition-opacity opacity-0 pointer-events-none" aria-controls="card-signup-password" aria-label="Show password" aria-pressed="false">
<svg aria-hidden="true" data-prefix="fal" data-icon="eye-slash" class="svg-inline--fa fa-eye-slash fa-w-20 absolute w-4 h-4 top-3 left-3 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<path fill="currentColor" d="M637 485.25L23 1.75A8 8 0 0011.76 3l-10 12.51A8 8 0 003 26.75l614 483.5a8 8 0 0011.25-1.25l10-12.51a8 8 0 00-1.25-11.24zM320 96a128.14 128.14 0 01128 128c0 21.62-5.9 41.69-15.4 59.57l25.45 20C471.65 280.09 480 253.14 480 224c0-36.83-12.91-70.31-33.78-97.33A294.88 294.88 0 01576.05 256a299.73 299.73 0 01-67.77 87.16l25.32 19.94c28.47-26.28 52.87-57.26 70.93-92.51a32.35 32.35 0 000-29.19C550.3 135.59 442.94 64 320 64a311.23 311.23 0 00-130.12 28.43l45.77 36C258.24 108.52 287.56 96 320 96zm60.86 146.83A63.15 63.15 0 00320 160c-1 0-1.89.24-2.85.29a45.11 45.11 0 01-.24 32.19zm-217.62-49.16A154.29 154.29 0 00160 224a159.39 159.39 0 00226.27 145.29L356.69 346c-11.7 3.53-23.85 6-36.68 6A128.15 128.15 0 01192 224c0-2.44.59-4.72.72-7.12zM320 416c-107.36 0-205.47-61.31-256-160 17.43-34 41.09-62.72 68.31-86.72l-25.86-20.37c-28.48 26.28-52.87 57.25-70.93 92.5a32.35 32.35 0 000 29.19C89.71 376.41 197.07 448 320 448a311.25 311.25 0 00130.12-28.43l-29.25-23C389.06 408.84 355.15 416 320 416z"></path>
</svg>
</button>
</div>
</label>
<button class="transition bg-cyan-400 text-cyan-900 hover:bg-cyan-500 hover:text-cyan-900 w-full p-4 rounded-lg mt-6 font-bold">Create account</button>
</div>
</div> Free
Videos
YouTube
Rating
5.0
Size
54.8mb
Downloads
10m
<div class="relative max-w-xs mx-auto p-8 mb-6 rounded-xl bg-gray-700">
<div class="flex flex-row justify-between items-center">
<svg aria-hidden="true" data-prefix="fab" data-icon="youtube" class="svg-inline--fa fa-youtube fa-w-18 w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
</svg>
<div class="bg-green-100 text-green-800 font-bold px-2 py-1 leading-none text-xs rounded-md"> Free </div>
</div>
<div class="mt-14 mb-10">
<p class="leading-loose">Videos</p>
<h3 class="font-bold leading-none text-3xl">YouTube</h3>
</div>
<div class="grid grid-cols-3 gap-4">
<div>
<p class="text-sm mb-2 text-gray-200">Rating</p>
<p class="font-semibold">5.0</p>
</div>
<div>
<p class="text-sm mb-2 text-gray-200">Size</p>
<p class="font-semibold">54.8mb</p>
</div>
<div>
<p class="text-sm mb-2 text-gray-200">Downloads</p>
<p class="font-semibold">10m</p>
</div>
</div>
<button class="transition bg-cyan-400 text-cyan-900 hover:bg-cyan-500 hover:text-cyan-900 mt-6 p-3 rounded-full focus:outline-none" aria-label="Download">
<svg aria-hidden="true" data-prefix="fas" data-icon="arrow-alt-down" class="svg-inline--fa fa-arrow-alt-down fa-w-14 w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor" d="M176 32h96c13.3 0 24 10.7 24 24v200h103.8c21.4 0 32.1 25.8 17 41L241 473c-9.4 9.4-24.6 9.4-34 0L31.3 297c-15.1-15.1-4.4-41 17-41H152V56c0-13.3 10.7-24 24-24z"></path>
</svg>
</button>
</div>
Joseph Joestar
New York, NY
<div class="relative p-6 max-w-sm mx-auto rounded-3xl z-10 overflow-hidden bg-gray-700">
<div class="bg-center bg-cover bg-no-repeat absolute top-0 left-0 right-0 w-full h-32 z-0 bg-cyan-400" style="background-image: url("https://images.unsplash.com/photo-1534430480872-3498386e7856?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=350&q=60");"></div>
<div class="relative flex flex-col justify-center items-center mt-12 z-10">
<div class="rounded-xl p-2 w-24 h-24 mx-auto bg-gray-700">
<div class="rounded-xl aspect-w-1 aspect-h-1 overflow-hidden">
<img class="absolute object-cover" src="https://images.unsplash.com/photo-1545996124-0501ebae84d0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=128&w=128&ixid=eyJhcHBfaWQiOjE3Nzg0fQ" alt="">
</div>
</div>
<div class="mt-8 text-center">
<div class="font-semibold text-xl leading-none mb-2"> Joseph Joestar </div>
<p class="text-sm leading-8">New York, NY</p>
</div>
<div class="flex flex-col md:flex-row w-full justify-between mt-8">
<button class="transition bg-gray-100 text-gray-900 hover:bg-gray-200 flex-1 font-medium p-4 leading-none text-sm rounded-lg mb-4 md:mb-0 md:mr-4">Add to friends</button>
<button class="transition bg-cyan-400 text-cyan-900 hover:bg-cyan-500 hover:text-cyan-900 flex-1 font-medium p-4 leading-none text-sm rounded-lg"> View profile</button>
</div>
</div>
</div>May 30, 2025
Hello,
Edward
44 ℃
Cloudly
Humidity 20%
<div class="p-6 md:p-8 max-w-sm mx-auto rounded-tr-3xl rounded-bl-3xl bg-gradient-to-tr from-cyan-300 to-cyan-100 text-gray-900 shadow-lg">
<div class="flex flex-row justify-between mb-4 md:mb-8">
<div>
<p class="text-xs opacity-90">May 30, 2025</p>
<p class="text-xs mt-4">Hello,</p>
<p class="text-xl font-bold">Edward</p>
</div>
</div>
<div class="flex flex-row items-center">
<div class="flex flex-col md:flex-row">
<div class="mr-4">
<svg aria-hidden="true" data-prefix="fal" data-icon="sun-cloud" class="svg-inline--fa fa-sun-cloud fa-w-20 w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<path fill="currentColor" d="M558.2 185.6C542.1 151.5 507.4 128 468 128c-41.7 0-77.6 25.2-92.5 62.5-32.5 11.4-55.5 42.1-55.5 78.3 0 45.9 37.3 83.2 83.2 83.2h153.6c45.9 0 83.2-37.3 83.2-83.2 0-45.4-36.6-82.4-81.8-83.2zM556.8 320H403.2c-28.3 0-51.2-22.9-51.2-51.2 0-27.5 21.8-49.8 49-51 4.9-32.7 32.9-57.8 67-57.8 35.8 0 64.8 27.8 67.5 62.9 6.5-3.1 13.6-5.3 21.3-5.3 28.3 0 51.2 22.9 51.2 51.2S585.1 320 556.8 320zm-153.6 64c-.7 0-1.4-.2-2.1-.2l4.3 21.6-84.8-16.8c-6.6-1.3-12.8 1.4-16.4 6.8L256 467.2l-48.1-71.9c-3.6-5.3-9.9-8.1-16.4-6.8l-84.8 16.8 16.8-84.8c1.2-6.3-1.4-12.8-6.8-16.4L44.8 256l71.9-48.1c5.4-3.6 8-10.1 6.8-16.4l-16.8-84.8 84.8 16.8c6.5 1.3 12.8-1.5 16.4-6.8L256 44.8l48.1 71.9c3.6 5.3 9.9 8.1 16.4 6.8L428.8 102c8.7-1.7 14.3-10.1 12.6-18.8-1.7-8.7-10.1-14.4-18.8-12.6L324.8 90 269.3 7.1c-3-4.4-8-7.1-13.3-7.1s-10.3 2.7-13.3 7.1L187.2 90 89.4 70.6c-5.3-1.1-10.6.6-14.4 4.4s-5.4 9.2-4.4 14.4L90 187.2 7.1 242.7c-4.4 3-7.1 7.9-7.1 13.3s2.7 10.3 7.1 13.3L90 324.8l-19.4 97.8c-1 5.2.6 10.7 4.4 14.4 3.8 3.8 9.1 5.4 14.4 4.4l97.8-19.4 55.5 82.9c3 4.4 8 7.1 13.3 7.1s10.3-2.7 13.3-7.1l55.4-82.9 97.8 19.4c5.4 1.1 10.7-.6 14.4-4.4 3.8-3.8 5.4-9.2 4.4-14.4l-7.6-38.6h-30.5zM256 179.7c21 0 40 8.5 53.8 22.3 6.2-8.7 13.6-16.4 22-23.1-19.5-19.2-46.3-31.1-75.8-31.1-59.7 0-108.3 48.6-108.3 108.3S196.3 364.3 256 364.3c22.8 0 44-7.2 61.5-19.3-7.1-8-13.1-16.9-17.8-26.6-12.4 8.7-27.4 13.9-43.7 13.9-42.1 0-76.3-34.2-76.3-76.3s34.2-76.3 76.3-76.3z"></path>
</svg>
</div>
<div class="font-medium text-lg mr-4"> 44
<sup class="-ml-1">℃</sup>
</div>
</div>
<div class="flex flex-col md:flex-row ml-auto">
<div class="">Cloudly</div>
<div class="ml-0 md:ml-4">Humidity 20%</div>
</div>
</div>
</div>
30 May
20 comments
Lorem ipsum dolor sit amet. Dicta laborum repellat qui incidunt
4 friends liked this
<div class="relative max-w-xs mx-auto overflow-hidden rounded-3xl rounded-3xl bg-gray-700">
<div>
<div class="relative aspect-w-16 aspect-h-12 rounded-bl-3xl rounded-br-3xl overflow-hidden">
<button class="bg-gray-100 absolute top-0 left-0 mt-4 ml-4 rounded-lg shadow w-10 h-10 z-10" aria-label="Save blog post">
<svg aria-hidden="true" data-prefix="fal" data-icon="heart" class="svg-inline--fa fa-heart fa-w-16 w-5 h-5 mx-auto stroke-current text-cyan-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M462.3 62.7c-54.5-46.4-136-38.7-186.6 13.5L256 96.6l-19.7-20.3C195.5 34.1 113.2 8.7 49.7 62.7c-62.8 53.6-66.1 149.8-9.9 207.8l193.5 199.8c6.2 6.4 14.4 9.7 22.6 9.7 8.2 0 16.4-3.2 22.6-9.7L472 270.5c56.4-58 53.1-154.2-9.7-207.8zm-13.1 185.6L256.4 448.1 62.8 248.3c-38.4-39.6-46.4-115.1 7.7-161.2 54.8-46.8 119.2-12.9 142.8 11.5l42.7 44.1 42.7-44.1c23.2-24 88.2-58 142.8-11.5 54 46 46.1 121.5 7.7 161.2z"></path>
</svg>
</button>
<img class="absolute w-full top-0 left-0 right-0 object-cover bg-cyan-400" alt="Image of Temple of Kukulcán in Chichén Itzá, Mérida, Mexico" src="https://images.unsplash.com/photo-1518638150340-f706e86654de?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">
</div>
<div class="p-6">
<div class="flex flex-row mb-4 text-sm">
<div class="mr-4">30 May</div>
<div>20 comments</div>
</div>
<h2 class="font-bold"> Lorem ipsum dolor sit amet. Dicta laborum repellat qui incidunt </h2>
<div class="flex flex-row items-center border-t border-opacity-50 mt-4 pt-4">
<div class="flex flex-row mr-4">
<div class="border-2 rounded-full w-6 h-6 bg-cyan-400 border-gray-700"></div>
<div class="border-2 rounded-full w-6 h-6 -ml-2 bg-cyan-400 border-gray-700"></div>
<div class="border-2 rounded-full w-6 h-6 -ml-2 bg-cyan-400 border-gray-700"></div>
<div class="border-2 rounded-full w-6 h-6 -ml-2 bg-cyan-400 border-gray-700"></div>
</div>
<div class="text-sm">4 friends liked this</div>
</div>
</div>
</div>
</div>
Gabi Braun
Product Designer
$ 11,313.04
**** **** **** 7516
<div class="py-10 bg-gradient-to-tl from-cyan-200 to-cyan-500">
<div class="relative max-w-xs mx-auto ring-gray-900 ring-8 ring-offset-0 ring-opacity-20 rounded-3xl">
<div class="grid p-4 rounded-3xl bg-gray-700">
<div class="flex flex-col justify-center items-center">
<div class="rounded-full w-20 h-20 mt-4 mb-2 overflow-hidden bg-cyan-400">
<img class="w-20 h-20 object-cover rounded-full" src="https://images.unsplash.com/photo-1520813792240-56fc4a3765a7?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=128&w=128&ixid=eyJhcHBfaWQiOjE3Nzg0fQ" alt="">
</div>
<div class="font-bold text-xl">Gabi Braun</div>
<p>Product Designer</p>
</div>
<div class="text-gray-900 p-6 mt-6 rounded-xl w-full bg-gradient-to-tr from-cyan-300 to-cyan-100">
<div class="opacity-75">
<svg aria-hidden="true" data-prefix="fab" data-icon="cc-visa" class="svg-inline--fa fa-cc-visa fa-w-18 w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="currentColor" d="M470.1 231.3s7.6 37.2 9.3 45H446c3.3-8.9 16-43.5 16-43.5-.2.3 3.3-9.1 5.3-14.9l2.8 13.4zM576 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h480c26.5 0 48 21.5 48 48zM152.5 331.2L215.7 176h-42.5l-39.3 106-4.3-21.5-14-71.4c-2.3-9.9-9.4-12.7-18.2-13.1H32.7l-.7 3.1c15.8 4 29.9 9.8 42.2 17.1l35.8 135h42.5zm94.4.2L272.1 176h-40.2l-25.1 155.4h40.1zm139.9-50.8c.2-17.7-10.6-31.2-33.7-42.3-14.1-7.1-22.7-11.9-22.7-19.2.2-6.6 7.3-13.4 23.1-13.4 13.1-.3 22.7 2.8 29.9 5.9l3.6 1.7 5.5-33.6c-7.9-3.1-20.5-6.6-36-6.6-39.7 0-67.6 21.2-67.8 51.4-.3 22.3 20 34.7 35.2 42.2 15.5 7.6 20.8 12.6 20.8 19.3-.2 10.4-12.6 15.2-24.1 15.2-16 0-24.6-2.5-37.7-8.3l-5.3-2.5-5.6 34.9c9.4 4.3 26.8 8.1 44.8 8.3 42.2.1 69.7-20.8 70-53zM528 331.4L495.6 176h-31.1c-9.6 0-16.9 2.8-21 12.9l-59.7 142.5H426s6.9-19.2 8.4-23.3H486c1.2 5.5 4.8 23.3 4.8 23.3H528z"></path>
</svg>
</div>
<p class="font-medium mt-6 mb-2 text-xl">$ 11,313.04</p>
<p>**** **** **** 7516</p>
</div>
</div>
</div>
</div>Images
14gb
1240 files
Documents
980mb
100 files
Media
20 files
Other
50 files
<div class="grid md:grid-cols-2 gap-6 max-w-xl mx-auto">
<div class="py-10 px-12 bg-orange-200 text-gray-900 rounded-xl">
<div class="bg-indigo-800 shadow mx-auto w-full rounded-xl">
<div class="aspect-w-1 aspect-h-1"></div>
</div>
<div class="flex flex-row justify-between mt-4 mb-2 font-medium">
<p>Images</p>
<p class="uppercase">14gb</p>
</div>
<p class="text-xs">1240 files</p>
</div>
<div class="grid gap-6">
<div class="p-6 bg-teal-300 text-gray-900 rounded-xl">
<div class="flex">
<div class="bg-rose-300 shadow mr-6 w-16 h-20"></div>
<div>
<p class="font-medium">Documents</p>
<p class="uppercase font-bold text-sm mb-4">980mb</p>
<p class="text-xs">100 files</p>
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-6">
<div class="p-4 bg-gray-700 rounded-xl">
<div class="w-16 h-16 shadow-md mx-auto rounded-full bg-cyan-400"></div>
<div class="text-center mt-2">
<p class="font-medium">Media</p>
<p class="text-sm">20 files</p>
</div>
</div>
<div class="p-4 bg-yellow-400 text-gray-900 rounded-xl">
<div class="bg-gray-100 w-16 h-16 shadow-md mx-auto rounded-full"></div>
<div class="text-center mt-2">
<p class="font-medium">Other</p>
<p class="text-sm">50 files</p>
</div>
</div>
</div>
</div>
</div>Dashboard
Design
2/10
Todos
Design
10/20
Blog
Web Dev
15/20
Landing page
Web Dev
5/20
Upcoming project
Web Dev
10/20
<div class="relative max-w-lg mx-auto p-8 mb-6 rounded-xl">
<div class="grid md:grid-cols-3 gap-4">
<div class="grid grid-cols-2 md:col-span-1 md:grid-cols-1 gap-4">
<div class="p-4 rounded-lg bg-gray-700">
<div class="w-10 h-10 bg-yellow-300 rounded-lg"></div>
<div class="mt-4 mb-4 md:mb-6">
<p class="text-base md:text-lg">Dashboard</p>
<p class="text-xs">Design</p>
</div>
<div class="flex flex-col md:flex-row items-start">
<div class="w-full h-2 rounded-full overflow-hidden bg-gray-800">
<div class="h-2 w-1/4 bg-yellow-300"></div>
</div>
<div class="mt-2 md:mt-0 md:ml-2 leading-none text-sm">2/10</div>
</div>
</div>
<div class="p-4 rounded-lg bg-gray-700">
<div class="w-10 h-10 bg-green-300 rounded-lg"></div>
<div class="mt-4 mb-4 md:mb-6">
<p class="text-base md:text-lg">Todos</p>
<p class="text-xs">Design</p>
</div>
<div class="flex flex-col md:flex-row items-start">
<div class="w-full h-2 rounded-full overflow-hidden bg-gray-800">
<div class="h-2 w-1/2 bg-green-300"></div>
</div>
<div class="mt-2 md:mt-0 md:ml-2 leading-none text-sm">10/20</div>
</div>
</div>
</div>
<div class="md:col-span-2 grid gap-4">
<div class="p-4 flex flex-col rounded-lg bg-gray-700">
<div class="flex flex-row items-start mb-4">
<div class="w-10 h-10 bg-indigo-300 mr-3 rounded-lg"></div>
<div class="mr-auto">
<p class="text-base md:text-lg leading-tight">Blog</p>
<p class="text-xs text-gray-200">Web Dev</p>
</div>
<div class="bg-indigo-300 text-indigo-900 font-medium px-2 py-1 rounded-xl text-xs"> 15/20 </div>
</div>
<div class="w-full h-2 rounded-full overflow-hidden bg-gray-800 mt-auto">
<div class="h-2 w-3/4 bg-indigo-300"></div>
</div>
</div>
<div class="p-4 flex flex-col rounded-lg bg-gray-700">
<div class="flex flex-row items-start mb-4">
<div class="w-10 h-10 bg-rose-300 mr-3 rounded-lg"></div>
<div class="mr-auto">
<p class="text-base md:text-lg leading-tight">Landing page</p>
<p class="text-xs text-gray-200">Web Dev</p>
</div>
<div class="bg-rose-300 text-rose-900 font-medium px-2 py-1 rounded-xl text-xs"> 5/20 </div>
</div>
<div class="w-full h-2 rounded-full overflow-hidden bg-gray-800 mt-auto">
<div class="h-2 w-1/4 bg-rose-300"></div>
</div>
</div>
<div class="p-4 flex flex-col rounded-lg bg-gray-700">
<div class="flex flex-row items-start mb-4">
<div class="w-10 h-10 bg-orange-300 mr-3 rounded-lg"></div>
<div class="mr-auto">
<p class="text-base md:text-lg leading-tight">Upcoming project</p>
<p class="text-xs text-gray-200">Web Dev</p>
</div>
<div class="bg-orange-300 text-orange-900 font-medium px-2 py-1 rounded-xl text-xs"> 10/20 </div>
</div>
<div class="w-full h-2 rounded-full overflow-hidden bg-gray-800 mt-auto">
<div class="h-2 w-1/2 bg-orange-300"></div>
</div>
</div>
</div>
</div>
</div>