Split Change Password

<!-- Two columns from md up; a single stack below it, explainer first in reading order. -->
<div class="grid w-full max-w-3xl overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm md:grid-cols-2 dark:border-gray-800 dark:bg-gray-950">
  <div class="border-b border-gray-200 bg-gray-50 p-6 md:border-b-0 md:border-r dark:border-gray-800 dark:bg-gray-900">
    <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Password</h2>
    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Pick something long and unique. A passphrase of a few unrelated words beats a short jumble.</p>
    <ul class="mt-4 space-y-2 text-sm text-gray-600 dark:text-gray-400">
      <li class="flex gap-2"><span aria-hidden="true" class="text-green-500">✓</span> Never reused elsewhere</li>
      <li class="flex gap-2"><span aria-hidden="true" class="text-green-500">✓</span> Stored in your manager</li>
    </ul>
  </div>

  <form class="space-y-4 p-6" novalidate>
    <div>
      <label for="cp-current" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Current password</label>
      <input id="cp-current" name="currentPassword" type="password" autocomplete="current-password"
        class="mt-1.5 block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-blue-400" />
    </div>
    <div>
      <label for="cp-new" class="block text-sm font-medium text-gray-700 dark:text-gray-300">New password</label>
      <input id="cp-new" name="newPassword" type="password" autocomplete="new-password"
        class="mt-1.5 block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-blue-400" />
    </div>
    <div>
      <label for="cp-confirm" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Confirm new password</label>
      <input id="cp-confirm" name="confirmPassword" type="password" autocomplete="new-password"
        class="mt-1.5 block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-blue-400" />
    </div>
    <button type="submit"
      class="inline-flex w-full items-center justify-center rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950">
      Update password
    </button>
  </form>
</div>