Setting options

        
        <div class="flex justify-center items-center bg-gray-100 w-full min-h-screen text-gray-800">
  <div class="rounded bg-white w-96 p-6">
    <h1 class="text-lg font-semibold">Settings</h1>
    <p class="text-gray-600 mb-4">This section has controls for what needs to be shown in your profile.</p>
    <ul>
      <li class="mb-4 flex justify-between items-center w-full">
        <div>
          <h2 class="font-medium">Date Of Birth</h2>
          <p class="text-sm text-gray-400">Sensitive information</p>
        </div><input type="checkbox" class="h-6 w-6">
      </li>
      <li class="mb-4 flex justify-between items-center w-full">
        <div>
          <h2 class="font-medium">Location</h2>
          <p class="text-sm text-gray-400">Place of residence</p>
        </div><input type="checkbox" class="h-6 w-6" checked="checked">
      </li>
      <li class="mb-4 flex justify-between items-center w-full">
        <div>
          <h2 class="font-medium">Dark Mode</h2>
          <p class="text-sm text-gray-400">UI display option</p>
        </div>
        <div class="h-6 w-10 rounded-full bg-gray-200 relative cursor-pointer">
          <div class="h-4 w-4 rounded-full bg-white absolute m-1"></div>
        </div>
        <div class="h-6 w-10 rounded-full bg-green-200 relative cursor-pointer hidden">
          <div class="h-4 w-4 rounded-full bg-white absolute m-1 right-0"></div>
        </div>
      </li>
    </ul>
  </div>
</div>