We Design and Develop Clean and High Quality Web Applications
Karen Robinson
Hey ! i'm available here
Your order is placed
Dummy text of the printing and industry.
Robert McCray
Good Morning!
Meeting with designers
It is a long established fact that a reader.
<!-- 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>
