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>