Xintra - Codeigniter TailwindCss Premium Admin & Dashboard Template

Basic Strong Password


    <div class="flex">
    <div class="flex-1">
    <input type="password" id="hs-strong-password-base"
        class="dark:placeholder:text-white/50 py-3 px-4 block w-full border-inputborder rounded-sm text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-white/10"
        placeholder="Enter password">
    <div data-hs-strong-password='{
    "target": "#hs-strong-password-base",
    "stripClasses": "hs-strong-password:opacity-100 hs-strong-password-accepted:bg-success h-2 flex-auto rounded-full bg-primary/70 opacity-50 mx-1"
    }' class="flex mt-3 -mx-1"></div>
    </div>
    </div>

Strong Password with API


    <div class="flex">
    <div class="relative flex-1">
    <input type="password"
    id="hs-strong-password-api-with-indicator-and-hint-in-popover"
    class="dark:placeholder:text-white/50 py-3 px-4 block w-full border-inputborder rounded-md text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-white/10"
    placeholder="Enter password">
    <div id="hs-strong-password-api"
    class="hidden absolute z-10 w-full bg-white shadow-md rounded-sm p-4 dark:bg-bodybg dark:border dark:border-white/10 dark:divide-white/10">
    <div> id="hs-strong-password-api-in-popover" data-hs-strong-password='{
        "target": "#hs-strong-password-api-with-indicator-and-hint-in-popover",
        "hints": "#hs-strong-password-api",
        "stripClasses": "hs-strong-password:opacity-100 hs-strong-password-accepted:bg-success h-2 flex-auto rounded-full bg-primary/70 opacity-50 mx-1",
        "mode": "popover",
        "checksExclude": ["lowercase", "min-length"],
        "specialCharactersSet": "&!@"
    }' class="flex mt-2 -mx-1">
    </div>
    <h4> class="mt-3 text-sm font-semibold text-gray-800 dark:text-white">
        Your password must contain:
    </h4>
    <ul class="space-y-1 text-sm text-gray-500 dark:text-white/70">
        <li data-hs-strong-password-hints-rule-text="uppercase"
            class="hs-strong-password-active:text-success flex items-center gap-x-2">
            <span class="hidden" data-check>
                <svg class="flex-shrink-0 size-4"
                    xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round">
                    <polyline points="20 6 9 17 4 12" />
                </svg>
            </span>
            <span data-uncheck>
                <svg class="flex-shrink-0 size-4"
                    xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round">
                    <path d="M18 6 6 18" />
                    <path d="m6 6 12 12" />
                </svg>
            </span>
            Should contain uppercase.
        </li>
        <li data-hs-strong-password-hints-rule-text="numbers"
            class="hs-strong-password-active:text-success flex items-center gap-x-2">
            <span class="hidden" data-check>
                <svg class="flex-shrink-0 size-4"
                    xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round">
                    <polyline points="20 6 9 17 4 12" />
                </svg>
            </span>
            <span data-uncheck>
                <svg class="flex-shrink-0 size-4"
                    xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round">
                    <path d="M18 6 6 18" />
                    <path d="m6 6 12 12" />
                </svg>
            </span>
            Should contain numbers.
        </li>
        <li data-hs-strong-password-hints-rule-text="special-characters"
            class="hs-strong-password-active:text-success flex items-center gap-x-2">
            <span class="hidden" data-check>
                <svg class="flex-shrink-0 size-4"
                    xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round">
                    <polyline points="20 6 9 17 4 12" />
                </svg>
            </span>
            <span data-uncheck>
                <svg class="flex-shrink-0 size-4"
                    xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round">
                    <path d="M18 6 6 18" />
                    <path d="m6 6 12 12" />
                </svg>
            </span>
            Should contain special characters (available chars: &!@).
        </li>
    </ul>
    </div>
    </div>
    </div>

Min Length Strong Password


    <div class="flex-1">
    <input type="password" id="hs-strong-password-with-minLength"
        class="dark:placeholder:text-white/50 py-3 px-4 block w-full border-inputborder rounded-md text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-white/10"
        placeholder="Enter password">
    <div id="hs-strong-password-minLength" data-hs-strong-password='{
        "target": "#hs-strong-password-with-minLength",
        "stripClasses": "hs-strong-password:opacity-100 hs-strong-password-accepted:bg-success h-2 flex-auto rounded-full bg-primary/70 opacity-50 mx-1",
        "minLength": "8"
        }' class="flex mt-3 -mx-1">
    </div>
    </div>

Strong Password Working with Popover


    <div class="flex">
    <div class="relative flex-1">
    <input type="password"
        id="hs-strong-password-with-indicator-and-hint-in-popover"
        class="dark:placeholder:text-white/50 py-3 px-4 block w-full border-inputborder rounded-md text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-white/10"
        placeholder="Enter password">
    <div id="hs-strong-password-popover"
        class="hidden absolute z-10 w-full bg-white shadow-md rounded-sm p-4 dark:bg-bodybg dark:border dark:border-white/10 dark:divide-white/10">
        <div> id="hs-strong-password-in-popover" data-hs-strong-password='{
        "target": "#hs-strong-password-with-indicator-and-hint-in-popover",
        "hints": "#hs-strong-password-popover",
        "stripClasses": "hs-strong-password:opacity-100 hs-strong-password-accepted:bg-success h-2 flex-auto rounded-full bg-primary/70 opacity-50 mx-1",
        "mode": "popover"
    }' class="flex mt-2 -mx-1">
        </div>

        <h4> class="mt-3 text-sm font-semibold text-gray-800 dark:text-white">
            Your password must contain:
        </h4>

        <ul class="space-y-1 text-sm text-gray-500 dark:text-white/70">
            <li data-hs-strong-password-hints-rule-text="min-length"
                class="hs-strong-password-active:text-success flex items-center gap-x-2">
                <span class="hidden" data-check>
                    <svg class="flex-shrink-0 size-4"
                        xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                        viewBox="0 0 24 24" fill="none" stroke="currentColor"
                        stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <polyline points="20 6 9 17 4 12" />
                    </svg>
                </span>
                <span data-uncheck>
                    <svg class="flex-shrink-0 size-4"
                        xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                        viewBox="0 0 24 24" fill="none" stroke="currentColor"
                        stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M18 6 6 18" />
                        <path d="m6 6 12 12" />
                    </svg>
                </span>
                Minimum number of characters is 6.
            </li>
            <li data-hs-strong-password-hints-rule-text="lowercase"
                class="hs-strong-password-active:text-success flex items-center gap-x-2">
                <span class="hidden" data-check>
                    <svg class="flex-shrink-0 size-4"
                        xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                        viewBox="0 0 24 24" fill="none" stroke="currentColor"
                        stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <polyline points="20 6 9 17 4 12" />
                    </svg>
                </span>
                <span data-uncheck>
                    <svg class="flex-shrink-0 size-4"
                        xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                        viewBox="0 0 24 24" fill="none" stroke="currentColor"
                        stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M18 6 6 18" />
                        <path d="m6 6 12 12" />
                    </svg>
                </span>
                Should contain lowercase.
            </li>
            <li data-hs-strong-password-hints-rule-text="uppercase"
                class="hs-strong-password-active:text-success flex items-center gap-x-2">
                <span class="hidden" data-check>
                    <svg class="flex-shrink-0 size-4"
                        xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                        viewBox="0 0 24 24" fill="none" stroke="currentColor"
                        stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <polyline points="20 6 9 17 4 12" />
                    </svg>
                </span>
                <span data-uncheck>
                    <svg class="flex-shrink-0 size-4"
                        xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                        viewBox="0 0 24 24" fill="none" stroke="currentColor"
                        stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M18 6 6 18" />
                        <path d="m6 6 12 12" />
                    </svg>
                </span>
                Should contain uppercase.
            </li>
            <li data-hs-strong-password-hints-rule-text="numbers"
                class="hs-strong-password-active:text-success flex items-center gap-x-2">
                <span class="hidden" data-check>
                    <svg class="flex-shrink-0 size-4"
                        xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                        viewBox="0 0 24 24" fill="none" stroke="currentColor"
                        stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <polyline points="20 6 9 17 4 12" />
                    </svg>
                </span>
                <span data-uncheck>
                    <svg class="flex-shrink-0 size-4"
                        xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                        viewBox="0 0 24 24" fill="none" stroke="currentColor"
                        stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M18 6 6 18" />
                        <path d="m6 6 12 12" />
                    </svg>
                </span>
                Should contain numbers.
            </li>
            <li data-hs-strong-password-hints-rule-text="special-characters"
                class="hs-strong-password-active:text-success flex items-center gap-x-2">
                <span class="hidden" data-check>
                    <svg class="flex-shrink-0 size-4"
                        xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                        viewBox="0 0 24 24" fill="none" stroke="currentColor"
                        stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <polyline points="20 6 9 17 4 12" />
                    </svg>
                </span>
                <span data-uncheck>
                    <svg class="flex-shrink-0 size-4"
                        xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                        viewBox="0 0 24 24" fill="none" stroke="currentColor"
                        stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M18 6 6 18" />
                        <path d="m6 6 12 12" />
                    </svg>
                </span>
                Should contain special characters.
            </li>
        </ul>
    </div>
    </div>
    </div>

Strong Password With Indicator and Hints

Level:

Your password must contain:

Minimum number of characters is 6.
Should contain lowercase.
Should contain uppercase.
Should contain numbers.
Should contain special characters.


    <div class="flex mb-2">
    <div class="flex-1">
    <input type="password" id="hs-strong-password-with-indicator-and-hint"
        class="dark:placeholder:text-white/50 py-3 px-4 block w-full border-inputborder rounded-md text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-white/10"
        placeholder="Enter password">
    <div id="hs-strong-password" data-hs-strong-password='{
        "target": "#hs-strong-password-with-indicator-and-hint",
        "hints": "#hs-strong-password-hints",
        "stripClasses": "hs-strong-password:opacity-100 hs-strong-password-accepted:bg-success h-2 flex-auto rounded-full bg-primary/70 opacity-50 mx-1"
    }' class="flex mt-3 -mx-1"></div>
    </div>
    </div>
    <div id="hs-strong-password-hints" class="">
    <div>
    <span class="text-sm text-gray-800 dark:text-gray-200">Level:</span>
    <span
        data-hs-strong-password-hints-weakness-text='["Empty", "Weak", "Medium", "Strong", "Very Strong", "Super Strong"]'
        class="text-sm font-semibold text-gray-800 dark:text-gray-200"></span>
    </div>

    <h4 class="my-2 text-sm font-semibold text-gray-800 dark:text-white">
    Your password must contain:
    </h4>

    <ul class="space-y-1 text-sm text-gray-500 dark:text-white/70">
    <li data-hs-strong-password-hints-rule-text="min-length"
        class="hs-strong-password-active:text-success flex items-center gap-x-2">
        <span class="hidden" data-check>
            <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg"
                width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round">
                <polyline points="20 6 9 17 4 12" />
            </svg>
        </span>
        <span data-uncheck>
            <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg"
                width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round">
                <path d="M18 6 6 18" />
                <path d="m6 6 12 12" />
            </svg>
        </span>
        Minimum number of characters is 6.
    </li>
    <li data-hs-strong-password-hints-rule-text="lowercase"
        class="hs-strong-password-active:text-success flex items-center gap-x-2">
        <span class="hidden" data-check>
            <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg"
                width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round">
                <polyline points="20 6 9 17 4 12" />
            </svg>
        </span>
        <span data-uncheck>
            <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg"
                width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round">
                <path d="M18 6 6 18" />
                <path d="m6 6 12 12" />
            </svg>
        </span>
        Should contain lowercase.
    </li>
    <li data-hs-strong-password-hints-rule-text="uppercase"
        class="hs-strong-password-active:text-success flex items-center gap-x-2">
        <span class="hidden" data-check>
            <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg"
                width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round">
                <polyline points="20 6 9 17 4 12" />
            </svg>
        </span>
        <span data-uncheck>
            <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg"
                width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round">
                <path d="M18 6 6 18" />
                <path d="m6 6 12 12" />
            </svg>
        </span>
        Should contain uppercase.
    </li>
    <li data-hs-strong-password-hints-rule-text="numbers"
        class="hs-strong-password-active:text-success flex items-center gap-x-2">
        <span class="hidden" data-check>
            <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg"
                width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round">
                <polyline points="20 6 9 17 4 12" />
            </svg>
        </span>
        <span data-uncheck>
            <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg"
                width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round">
                <path d="M18 6 6 18" />
                <path d="m6 6 12 12" />
            </svg>
        </span>
        Should contain numbers.
    </li>
    <li data-hs-strong-password-hints-rule-text="special-characters"
        class="hs-strong-password-active:text-success flex items-center gap-x-2">
        <span class="hidden" data-check>
            <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg"
                width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round">
                <polyline points="20 6 9 17 4 12" />
            </svg>
        </span>
        <span data-uncheck>
            <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg"
                width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round">
                <path d="M18 6 6 18" />
                <path d="m6 6 12 12" />
            </svg>
        </span>
        Should contain special characters.
    </li>
    </ul>
    </div>

Toggle Password:

Basic Toggle Password

Password


    <label> class="block text-sm mb-2 dark:text-white">Password</label>
    <div class="relative">
    <input id="hs-toggle-password" type="password"
        class="dark:placeholder:text-white/50 py-3 px-4 block w-full border-inputborder rounded-sm text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white/70 dark:focus:ring-primary"
        placeholder="Enter password" value="12345qwerty">
    <button type="button" data-hs-toggle-password='{
                                    "target": "#hs-toggle-password"
                                    }'
        class="absolute top-0 end-0 p-3.5 rounded-e-md dark:focus:outline-none dark:focus:ring-0 dark:shadow-none dark:focus:ring-transparent">
        <svg class="flex-shrink-0 size-3.5 text-gray-400 dark:text-white" width="24" height="24" viewBox="0 0 24 24"
            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path class="hs-password-active:hidden" d="M9.88 9.88a3 3 0 1 0 4.24 4.24" />
            <path class="hs-password-active:hidden"
                d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" />
            <path class="hs-password-active:hidden"
                d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" />
            <line class="hs-password-active:hidden" x1="2" x2="22" y1="2" y2="22" />
            <path class="hidden hs-password-active:block" d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
            <circle class="hidden hs-password-active:block" cx="12" cy="12" r="3" />
        </svg>
    </button>
    </div>

Checkbox Tooggle Password

Current password

Show password


    <div class="mb-5">
    <label for="hs-toggle-password-with-checkbox"
        class="block text-sm mb-2 dark:text-white">Current password</label>
    <input id="hs-toggle-password-with-checkbox" type="password"
        class="dark:placeholder:text-white/50 py-3 px-4 block w-full border-inputborder rounded-sm text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white/70 dark:focus:ring-primary"
        placeholder="Enter current password" value="12345qwerty">
    <!-- Checkbox -->
    <div class="flex mt-4">
        <input data-hs-toggle-password='{
            "target": "#hs-toggle-password-with-checkbox"
        }' id="hs-toggle-password-checkbox" type="checkbox"
            class="form-check-input mt-0.5 pointer-events-none">
        <label for="hs-toggle-password-checkbox"
            class="text-sm text-gray-500 ms-2 dark:text-white/70">Show password</label>
    </div>
    <!-- End Checkbox -->
    </div>

Multi Toggle

New password

Current password


    <div class="space-y-5" data-hs-toggle-password-group>
    <!-- Form Group -->
    <label> for="hs-toggle-password-multi-toggle-np"
    class="block text-sm mb-2 dark:text-white">New password</label>
    <div class="relative">
    <input id="hs-toggle-password-multi-toggle-np" type="password"
        class="dark:placeholder:text-white/50 py-3 px-4 block w-full border-inputborder rounded-sm text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white/70 dark:focus:ring-primary"
        placeholder="Enter new password">
    <button type="button" data-hs-toggle-password='{
        "target": ["#hs-toggle-password-multi-toggle", "#hs-toggle-password-multi-toggle-np"]
    }'
        class="absolute top-0 end-0 p-3.5 rounded-e-md dark:focus:outline-none dark:focus:ring-0 dark:shadow-none dark:focus:ring-transparent">
        <svg class="flex-shrink-0 size-3.5 text-gray-400 dark:text-white" width="24"
            height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path class="hs-password-active:hidden"
                d="M9.88 9.88a3 3 0 1 0 4.24 4.24" />
            <path class="hs-password-active:hidden"
                d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" />
            <path class="hs-password-active:hidden"
                d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" />
            <line class="hs-password-active:hidden" x1="2" x2="22" y1="2" y2="22" />
            <path class="hidden hs-password-active:block"
                d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
            <circle class="hidden hs-password-active:block" cx="12" cy="12" r="3" />
        </svg>
    </button>
    </div>
    <!-- End Form Group -->

    <!-- Form Group -->
    <label> for="hs-toggle-password-multi-toggle"
    class="block text-sm mb-2 dark:text-white">Current password</label>
    <div class="relative">
    <input id="hs-toggle-password-multi-toggle" type="password"
        class="dark:placeholder:text-white/50 py-3 px-4 block w-full border-inputborder rounded-sm text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white/70 dark:focus:ring-primary"
        placeholder="Enter current password" value="12345qwerty">
    <button type="button" data-hs-toggle-password='{
        "target": ["#hs-toggle-password-multi-toggle", "#hs-toggle-password-multi-toggle-np"]
    }'
        class="absolute top-0 end-0 p-3.5 rounded-e-md dark:focus:outline-none dark:focus:ring-0 dark:shadow-none dark:focus:ring-transparent">
        <svg class="flex-shrink-0 size-3.5 text-gray-400 dark:text-white" width="24"
            height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path class="hs-password-active:hidden"
                d="M9.88 9.88a3 3 0 1 0 4.24 4.24" />
            <path class="hs-password-active:hidden"
                d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" />
            <path class="hs-password-active:hidden"
                d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" />
            <line class="hs-password-active:hidden" x1="2" x2="22" y1="2" y2="22" />
            <path class="hidden hs-password-active:block"
                d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
            <circle class="hidden hs-password-active:block" cx="12" cy="12" r="3" />
        </svg>
    </button>
    </div>
    <!-- End Form Group -->
    </div>

PIN Input:

Basic PIN Input


                            <div class="flex space-x-3 rtl:space-x-reverse" data-hs-pin-input>
        <input type="text"
            class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
            data-hs-pin-input-item autofocus>
        <input type="text"
            class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
            data-hs-pin-input-item>
        <input type="text"
            class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
            data-hs-pin-input-item>
        <input type="text"
            class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
            data-hs-pin-input-item>
    </div>

Placeholder PIN Input


    <div> class="flex space-x-3 rtl:space-x-reverse" data-hs-pin-input>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    </div>

Gray PIN Input


    <div class="flex space-x-3 rtl:space-x-reverse" data-hs-pin-input>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center bg-gray-100 border-transparent rounded-md text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-transparent dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center bg-gray-100 border-transparent rounded-md text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-transparent dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center bg-gray-100 border-transparent rounded-md text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-transparent dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center bg-gray-100 border-transparent rounded-md text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-transparent dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    </div>

Underline PIN Input


    <div> class="flex space-x-3 rtl:space-x-reverse" data-hs-pin-input>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center bg-transparent border-t-transparent border-b-2 border-x-transparent border-b-gray-200 text-sm focus:border-t-transparent focus:border-x-transparent focus:border-b-primary focus:ring-0 disabled:opacity-50 disabled:pointer-events-none dark:border-b-white/10 dark:text-white dark:focus:ring-primary dark:focus:border-b-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center bg-transparent border-t-transparent border-b-2 border-x-transparent border-b-gray-200 text-sm focus:border-t-transparent focus:border-x-transparent focus:border-b-primary focus:ring-0 disabled:opacity-50 disabled:pointer-events-none dark:border-b-white/10 dark:text-white dark:focus:ring-primary dark:focus:border-b-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center bg-transparent border-t-transparent border-b-2 border-x-transparent border-b-gray-200 text-sm focus:border-t-transparent focus:border-x-transparent focus:border-b-primary focus:ring-0 disabled:opacity-50 disabled:pointer-events-none dark:border-b-white/10 dark:text-white dark:focus:ring-primary dark:focus:border-b-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center bg-transparent border-t-transparent border-b-2 border-x-transparent border-b-gray-200 text-sm focus:border-t-transparent focus:border-x-transparent focus:border-b-primary focus:ring-0 disabled:opacity-50 disabled:pointer-events-none dark:border-b-white/10 dark:text-white dark:focus:ring-primary dark:focus:border-b-primary"
        placeholder="⚬" data-hs-pin-input-item>
    </div>

Focus effect PIN Input


    <div class="flex space-x-3 rtl:space-x-reverse" data-hs-pin-input>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm focus:scale-110 focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm focus:scale-110 focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm focus:scale-110 focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm focus:scale-110 focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    </div>

PIN Input Type


    <div> class="flex space-x-3 rtl:space-x-reverse" data-hs-pin-input='{"availableCharsRE": "^[0-9]+$"}'>
    <input type="text"
    class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
    placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
    class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
    placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
    class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
    placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
    class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
    placeholder="⚬" data-hs-pin-input-item>
    </div>

PIN Input Regex type


    <div class="flex space-x-3 rtl:space-x-reverse" data-hs-pin-input='{"availableCharsRE": "^[0-3]+$"}'>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    </div>

Masked


    <div> class="flex space-x-3 rtl:space-x-reverse" data-hs-pin-input='{"availableCharsRE": "^[0-3]+$"}'>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    </div>

Show PIN code suggest on iOS keyboard


    <div class="flex space-x-3 rtl:space-x-reverse" data-hs-pin-input>
    <input
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        type="tel" placeholder="⚬" data-hs-pin-input-item autocomplete="one-time-code">
    <input
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        type="tel" placeholder="⚬" data-hs-pin-input-item>
    <input
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        type="tel" placeholder="⚬" data-hs-pin-input-item>
    <input
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        type="tel" placeholder="⚬" data-hs-pin-input-item>
    </div>

Pin Input Disabled


    <div> class="flex space-x-3 rtl:space-x-reverse" data-hs-pin-input>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item disabled>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item disabled>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item disabled>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item disabled>
    </div>

Focus effect PIN Input


    <div class="flex space-x-3 rtl:space-x-reverse" data-hs-pin-input>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    </div>
    <div class="flex space-x-3 rtl:space-x-reverse" data-hs-pin-input>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    </div>
    <div class="flex space-x-3 rtl:space-x-reverse" data-hs-pin-input>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    <input type="text"
        class="dark:placeholder:text-white/50 block w-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary"
        placeholder="⚬" data-hs-pin-input-item>
    </div>

PIN Input Sizes


                    <div class="flex space-x-3 rtl:space-x-reverse" data-hs-pin-input>
                    <input type="text" class="dark:placeholder:text-white/50 block size-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary" placeholder="⚬" data-hs-pin-input-item>
                    <input type="text" class="dark:placeholder:text-white/50 block size-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary" placeholder="⚬" data-hs-pin-input-item>
                    <input type="text" class="dark:placeholder:text-white/50 block size-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary" placeholder="⚬" data-hs-pin-input-item>
                    <input type="text" class="dark:placeholder:text-white/50 block size-[38px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary" placeholder="⚬" data-hs-pin-input-item>
                </div>

                <div class="flex space-x-3 rtl:space-x-reverse" data-hs-pin-input>
                    <input type="text" class="dark:placeholder:text-white/50 block size-[46px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary" placeholder="⚬" data-hs-pin-input-item>
                    <input type="text" class="dark:placeholder:text-white/50 block size-[46px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary" placeholder="⚬" data-hs-pin-input-item>
                    <input type="text" class="dark:placeholder:text-white/50 block size-[46px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary" placeholder="⚬" data-hs-pin-input-item>
                    <input type="text" class="dark:placeholder:text-white/50 block size-[46px] text-center border-inputborder rounded-md text-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary" placeholder="⚬" data-hs-pin-input-item>
                </div>

                <div class="flex space-x-3 rtl:space-x-reverse" data-hs-pin-input>
                    <input type="text" class="dark:placeholder:text-white/50 block sm:size-[62px] size-[50px] text-center border-inputborder rounded-md text-lg [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary" placeholder="⚬" data-hs-pin-input-item>
                    <input type="text" class="dark:placeholder:text-white/50 block sm:size-[62px] size-[50px] text-center border-inputborder rounded-md text-lg [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary" placeholder="⚬" data-hs-pin-input-item>
                    <input type="text" class="dark:placeholder:text-white/50 block sm:size-[62px] size-[50px] text-center border-inputborder rounded-md text-lg [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary" placeholder="⚬" data-hs-pin-input-item>
                    <input type="text" class="dark:placeholder:text-white/50 block sm:size-[62px] size-[50px] text-center border-inputborder rounded-md text-lg [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:focus:ring-primary" placeholder="⚬" data-hs-pin-input-item>
                </div>

Switcher

Strong Password:

Your password must contain:

Your password must contain:

Your password must contain:

Toggle Password:

PIN Input:

Switcher

(Qty : 1)$78

Total :$75

(Qty : 2)$15

Total :$30

(Qty : 1)$84

Total :$84

(Qty : 1)$37

Total :$37

(Qty : 2)$29

Total :$48

Passwords

Strong Password:

Your password must contain:

Your password must contain:

Your password must contain:

Toggle Password:

PIN Input: