<div class="mb-5 relative z-0 flex">
    <input data-popover-target="popover-password" type="password" id="user-password-inpt" onchange="set_password(this)"
        class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
    placeholder=" " />
    <div data-popper-arrow></div>
    <label for="user-password-inpt" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">
    Password</label>
    <i id="show-password" class="ml-2">
        <svg class="hidden pl-3 mt-2 text-slate-500 w-8 h-8"><use href="#symbl-eye-slash" /></svg>
        <svg class="pl-3 mt-2 text-slate-500 w-8 h-8"><use href="#symbl-eye" /></svg>
    </i>
    <div data-popover id="popover-password" role="tooltip" class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 w-72 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">
        <div class="p-3 space-y-2">
            <h3 class="font-semibold text-gray-900 dark:text-white">Must have at least 6 characters</h3>
            <div class="grid grid-cols-4 gap-2">
                <div class="h-1 bg-orange-300 dark:bg-orange-400"></div>
                <div class="h-1 bg-orange-300 dark:bg-orange-400"></div>
                <div class="h-1 bg-gray-200 dark:bg-gray-600"></div>
                <div class="h-1 bg-gray-200 dark:bg-gray-600"></div>
            </div>
            <p>It’s better to have:</p>
            <ul>
                <li class="flex items-center mb-1">
                    <svg class="w-4 h-4 mr-2 text-green-400 dark:text-green-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
                    Upper & lower case letters
                </li>
                <li class="flex items-center mb-1">
                    <svg class="w-4 h-4 mr-2 text-gray-300 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                    A symbol (#$&)
                </li>
                <li class="flex items-center">
                    <svg class="w-4 h-4 mr-2 text-gray-300 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                    A longer password (min. 12 chars.)
                </li>
            </ul>
        </div>
    </div>
</div>
<dl>
    <dt class="flex flex-col text-sm font-medium text-gray-500 dark:text-gray-400">Secure estimation</dt>
    <dd class="flex items-center mb-3">
        <div class="w-full bg-gray-200 rounded h-2.5 dark:bg-gray-700 mr-2">
            <div id="password-secure-bar" class="bg-blue-600 h-2.5 rounded dark:bg-blue-500" style="width: 0%"></div>
        </div>
        <span id="password-secure-val" class="text-sm font-medium text-gray-500 dark:text-gray-400">0</span>
    </dd>
    <dd class="mt-2 text-xs" id="password-suggestions"></dd>
    <dd class="mt-2 text-xs text-orange-500" id="password-warning"></dd>
    <dd class="mt-2 mb-5 text-xs text-red-500" id="password-error"></dd>
</dl>
<div class="mb-5 relative z-0 flex">
    <input type="password" id="user-repeat-password-inpt" onchange="set_password(this)"
        class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
        placeholder=" " />
    <label for="user-repeat-password-inpt" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">
        Repeat Password</label>
    <i id="show-repeat-password" class="ml-2">
        <svg class="hidden pl-3 mt-2 text-slate-500 w-8 h-8"><use href="#symbl-eye-slash" /></svg>
        <svg class="pl-3 mt-2 text-slate-500 w-8 h-8"><use href="#symbl-eye" /></svg>
    </i>
</div>
