Form Advanced

<!-- CSS -->
<link rel="stylesheet" href="assets/libs/mobius1-selectr/selectr.min.css">
<!-- JS -->
<script src="assets/libs/mobius1-selectr/selectr.min.js"></script>
<script src="assets/js/pages/form-advanced.init.js"></script>

<select id="default" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
    <option>United States</option>
    <option>Canada</option>
    <option>France</option>
    <option>Germany</option>
</select>

<!-- CSS -->
<link rel="stylesheet" href="assets/libs/mobius1-selectr/selectr.min.css">
<!-- JS -->
<script src="assets/libs/mobius1-selectr/selectr.min.js"></script>
<script src="assets/js/pages/form-advanced.init.js"></script>

<select id="multiSelect" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
    <option>United States</option>
    <option>Canada</option>
    <option>France</option>
    <option>Germany</option>
</select>

                                       
<!-- CSS -->
<link rel="stylesheet" href="assets/libs/mobius1-selectr/selectr.min.css">
<!-- JS -->
<script src="assets/libs/mobius1-selectr/selectr.min.js"></script>
<script src="assets/js/pages/form-advanced.init.js"></script>

<select id="taggableSelect" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
    <option>United States</option>
    <option>Canada</option>
    <option>France</option>
    <option>Germany</option>
</select>

<!-- CSS -->
<link rel="stylesheet" href="assets/libs/huebee/huebee.min.css">
<!-- JS -->
<script src="assets/libs/huebee/huebee.pkgd.min.js"></script>
<script src="assets/js/pages/form-advanced.init.js"></script>

<input  class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300  px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700 color-input" value="#228">

<input class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300  px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700 " value="#024" data-huebee /> 

<input class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300  px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700 " value="#f7f8f9" data-huebee='{ "setBGColor": true, "saturations": 2 }' />      

<div class="flex">
    <button type="button" class="inline-flex items-center px-3 py-1 text-sm text-slate-100 bg-primary-500 rounded-l-md border border-r-0 border-primary-500 dark:bg-slate-600 dark:text-slate-400 dark:border-slate-600" onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
      <i class="fas fa-minus"></i>
    </button>
    <input type="number" id="website-admin" class="form-input w-full rounded-none border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700" min="0" name="quantity" value="0">
    <button type="button" class="inline-flex items-center px-3 py-1 text-sm text-slate-100 bg-primary-500 rounded-r-md border border-l-0 border-primary-500 dark:bg-slate-600 dark:text-slate-400 dark:border-slate-600" onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
        <i class="fas fa-plus"></i>
    </button>
</div>

<!-- CSS -->
<link rel="stylesheet" href="assets/libs/vanillajs-datepicker/css/datepicker.min.css">
<!-- JS -->
    <script src="assets/libs/vanillajs-datepicker/js/datepicker-full.min.js"></script>
    <script src="assets/libs/moment/moment.js"></script>
<script src="assets/js/pages/form-advanced.init.js"></script>

<label for="Default_Datepicker" class="font-medium text-sm text-slate-600 dark:text-slate-400">Default Datepicker</label>
<input type="text" id="Default_Datepicker" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700" name="foo">
<label for="Default_Datepicker" class="font-medium text-sm text-slate-600 dark:text-slate-400 mt-2">Default Datepicker</label>
<div class="flex mt-2" id="DateRange">
    <input type="text" id="start-date" class="form-input w-full rounded-none rounded-l-md  border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700" placeholder="Start" aria-label="StartDate">
    <span class="inline-flex items-center px-3 text-sm text-slate-900 bg-slate-200  border border-r-0 border-l-0 border-slate-300 dark:bg-slate-600 dark:text-slate-400 dark:border-slate-600">
        to
    </span>
    <input type="text" id="end-date" class="form-input w-full rounded-none rounded-r-md  border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700" placeholder="End" aria-label="EndDate">
</div>

<!-- CSS -->
<link rel="stylesheet" href="assets/libs/vanillajs-datepicker/css/datepicker.min.css">
<!-- JS -->
    <script src="assets/libs/vanillajs-datepicker/js/datepicker-full.min.js"></script>
    <script src="assets/libs/moment/moment.js"></script>
<script src="assets/js/pages/form-advanced.init.js"></script>

<label class="mb-3 font-medium text-sm text-slate-600 dark:text-slate-400">Inline Datepicker</label>
<div id="inline_calendar"></div> 

<!-- JS -->
<script src="assets/libs/imask/imask.min.js"></script>
<script src="assets/js/pages/form-advanced.init.js"></script>

<div class="mb-2">
    <label class="font-medium text-sm text-slate-600 dark:text-slate-400">RegExp (Russian postal code) <span class="desc ml-2 text-xs text-slate-400">/^[1-6]\d{0,5}$/</span></label>
    <input id="regexp-mask" type="text" value="" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
</div>
<div class="mb-2">
    <label class="font-medium text-sm text-slate-600 dark:text-slate-400">Type here against mask <span class="desc ml-2 text-xs text-slate-400">+{7}(000)000-00-00</span></label>
    <input id="start-phone-mask" type="text" value="" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
    <div class="desc text-xs text-slate-400">unmasked: <span id="start-phone-unmasked"></span><span id="start-phone-complete" class="example__complete"></span></div>
</div>
<div class="mb-2">
    <label class="font-medium text-sm text-slate-600 dark:text-slate-400">Mask in overwrite and autofix modes</label>
    <input id="date-overwrite-mask" type="text" value="" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
</div>
<div class="mb-2">
    <label class="font-medium text-sm text-slate-600 dark:text-slate-400">Type to uppercase</label>
    <input id="uppercase-mask" type="text" value="" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
</div>
<div>
    <label class="font-medium text-sm text-slate-600 dark:text-slate-400">Date and time</label>
    <input id="moment-mask" type="text" value="" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
    <div class="desc text-xs text-slate-400">date: <span id="moment-value"></span></div>
</div>