Inputs

<div class="w-full space-y-1" x-data="{ show: false }">

    
            <label for="password" class="block text-sm font-semibold text-gray-500 dark:text-gray-300">
            Kata Sandi
        </label>
    
    <div class="relative w-full flex items-center">

        
                    <div class="absolute left-3 top-1/2 -translate-y-1/2 flex items-center justify-center text-gray-400 dark:text-gray-400
                        group-focus-within:text-indigo-500 transition-colors pointer-events-none">
                <i class="ti ti-lock text-lg"></i>
            </div>
        
        
        <input
            :type="type === 'password' && show ? 'text' : 'password'"
            name="password"
            id="password"
            class="w-full h-12 text-sm font-semibold rounded-xl
                            bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-white
                            border border-gray-200 dark:border-gray-700
                            outline-none transition-all focus:ring-2 pl-10 pr-12 focus:ring-indigo-500/30" placeholder="••••••••"
            value=""
        >

        
                    <button type="button"
                    @click="show = !show"
                    class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center justify-center text-gray-400 dark:text-gray-400
                           hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors"
            >
                <i :class="show ? 'ti ti-eye' : 'ti ti-eye-off'" class="text-lg"></i>
            </button>
        
    </div>

    
    
</div>