Profile Update

<div class="flex justify-center items-center bg-gray-100 w-full min-h-screen text-gray-800"> <div class="rounded-lg bg-white shadow-lg w-full p-8 max-w-xl"> <h1 class="text-2xl font-semibold mb-1">Update your profile</h1> <p class="text-gray-400">Keep your basic details updated at all times</p> <h2 class="mt-4 mb-2 font-medium text-gray-700">Profile Picture</h2> <div class="grid grid-cols-4 grid-rows-2 gap-2 items-center p-4 rounded-lg border border-gray-200 bg-gray-50"><img src="https://images.pexels.com/photos/459947/pexels-photo-459947.jpeg?crop=faces&fit=crop&auto=compress&cs=tinysrgb&h=90&w=90" alt="Profile picture" class="rounded-lg row-span-2"> <button class="p-2 border border-blue-500 bg-blue-50 text-blue-500 rounded-md col-span-2 hover:bg-blue-500 hover:text-white transition-colors">Update Profile Picture</button> <button class="p-2 border border-red-500 bg-red-50 text-red-500 rounded-md hover:bg-red-500 hover:text-white transition-colors">Remove</button> <p class="col-span-3 text-xs text-gray-500">We recommend uploading at a higher resolution, ideally 1000 x 1000 pixels or above.</p> </div> <div class="grid grid-cols-2 gap-2 mt-2"> <div> <h2 class="mt-4 mb-2 font-medium text-sm text-gray-700">First Name</h2><input type="text" class="border-b px-2 py-1 w-full" placeholder="John"> </div> <div> <h2 class="mt-4 mb-2 font-medium text-sm text-gray-700">Last Name</h2><input type="text" class="border-b px-2 py-1 w-full" placeholder="Doe"> </div> <div class="col-span-2"> <h2 class="mt-4 mb-2 font-medium text-sm text-gray-700">Email address</h2><input type="text" class="border-b px-2 py-1 w-full" placeholder="[email protected]"> </div> </div> </div> </div>