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.
<form> <div class="mb-2"> <label for="email" class="font-medium text-sm text-slate-600 dark:text-slate-400">Your email</label> <input type="email" id="email" 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" placeholder="name@t-wind.com" required> </div> <div class="mb-2"> <label for="password" class="font-medium text-sm text-slate-600 dark:text-slate-400">Your password</label> <input type="password" id="password" 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" required> </div> <div class="mb-2"> <label for="Mobile_Number" class="font-medium text-sm text-slate-600 dark:text-slate-400">Your Mobile Number</label> <input type="text" id="Mobile_Number" 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" required> </div> <div class="flex items-start mb-2"> <label class="flex"> <input type="checkbox" class="accent-primary-500"> <span for="default-checkbox" class="ml-1 text-sm font-medium text-slate-600 dark:text-gray-300"> Remember me</span> </label> </div> <button type="submit" class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500 text-sm font-medium py-1 px-3 rounded mb-1">Submit</button> <button type="text" class="inline-block focus:outline-none text-red-500 hover:bg-red-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-red-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-red-500 text-sm font-medium py-1 px-3 rounded mb-1">Cancel</button> </form>
<form> <div class="relative z-0 mb-2 w-full group"> <input type="email" name="floating_email" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b border-slate-300/60 appearance-none dark:text-slate-300 dark:border-slate-700 dark:focus:border-primary-500 focus:outline-none focus:ring-0 focus:border-primary-500 peer" placeholder=" " required /> <label for="floating_email" class="absolute text-sm text-gray-400 dark:text-slate-400/70 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-primary-500 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">Email address</label> </div> <div class="relative z-0 mb-2 w-full group"> <input type="password" name="floating_password" id="floating_password" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b border-slate-300/60 appearance-none dark:text-slate-300 dark:border-slate-700 dark:focus:border-primary-500 focus:outline-none focus:ring-0 focus:border-primary-500 peer" placeholder=" " required /> <label for="floating_password" class="absolute text-sm text-gray-400 dark:text-slate-400/70 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-primary-500 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> </div> <div class="relative z-0 mb-2 w-full group"> <input type="password" name="repeat_password" id="floating_repeat_password" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b border-slate-300/60 appearance-none dark:text-slate-300 dark:border-slate-700 dark:focus:border-primary-500 focus:outline-none focus:ring-0 focus:border-primary-500 peer" placeholder=" " required /> <label for="floating_repeat_password" class="absolute text-sm text-gray-400 dark:text-slate-400/70 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-primary-500 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">Confirm password</label> </div> <div class="grid xl:grid-cols-2 xl:gap-6"> <div class="relative z-0 mb-2 w-full group"> <input type="text" name="floating_first_name" id="floating_first_name" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b border-slate-300/60 appearance-none dark:text-slate-300 dark:border-slate-700 dark:focus:border-primary-500 focus:outline-none focus:ring-0 focus:border-primary-500 peer" placeholder=" " required /> <label for="floating_first_name" class="absolute text-sm text-gray-400 dark:text-slate-400/70 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-primary-500 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">First name</label> </div> <div class="relative z-0 mb-2 w-full group"> <input type="text" name="floating_last_name" id="floating_last_name" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b border-slate-300/60 appearance-none dark:text-slate-300 dark:border-slate-700 dark:focus:border-primary-500 focus:outline-none focus:ring-0 focus:border-primary-500 peer" placeholder=" " required /> <label for="floating_last_name" class="absolute text-sm text-gray-400 dark:text-slate-400/70 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-primary-500 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">Last name</label> </div> </div> <div class="grid xl:grid-cols-2 xl:gap-6"> <div class="relative z-0 mb-2 w-full group"> <input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" name="floating_phone" id="floating_phone" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b border-gray-300 appearance-none dark:text-slate-300 dark:border-slate-700 dark:focus:border-primary-500 focus:outline-none focus:ring-0 focus:border-primary-500 peer" placeholder=" " required /> <label for="floating_phone" class="absolute text-sm text-gray-400 dark:text-slate-400/70 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-primary-500 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">Phone number (123-456-7890)</label> </div> <div class="relative z-0 mb-2 w-full group"> <input type="text" name="floating_company" id="floating_company" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b border-gray-300 appearance-none dark:text-slate-300 dark:border-slate-700 dark:focus:border-primary-500 focus:outline-none focus:ring-0 focus:border-primary-500 peer" placeholder=" " required /> <label for="floating_company" class="absolute text-sm text-gray-400 dark:text-slate-400/70 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-primary-500 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">Company (Ex. Google)</label> </div> </div> <button type="submit" class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500 text-sm font-medium py-1 px-3 rounded mb-1 lg:mb-0">Submit</button> <button type="text" class="inline-block focus:outline-none text-red-500 hover:bg-red-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-red-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-red-500 text-sm font-medium py-1 px-3 rounded mb-1 lg:mb-0">Cancel</button> </form>
<div class="mb-2"> <label for="large-input" class="font-medium text-sm text-slate-600 dark:text-slate-400">Large input</label> <input type="text" id="large-input" 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-2 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-base text-lg hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500 dark:hover:border-slate-700"> </div> <div class="mb-2"> <label for="base-input" class="font-medium text-sm text-slate-600 dark:text-slate-400">Base input</label> <input type="text" id="base-input" 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 for="small-input" class="font-medium text-sm text-slate-600 dark:text-slate-400">Small input</label> <input type="text" id="small-input" 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-xs text-xs hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500 dark:hover:border-slate-700"> </div>
<form> <input type="text" id="disabled-input" 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 mb-4 cursor-not-allowed" value="Disabled input" disabled> <input type="text" id="disabled-input-2" 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 cursor-not-allowed" value="Disabled readonly input" disabled readonly> </form>
We’ll never share your details. Read our Privacy Policy.
<form> <label for="email" class="font-medium text-sm text-slate-600 dark:text-slate-400">Your email</label> <input type="email" id="email" 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" placeholder="name@t-wind.com"> <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">We’ll never share your details. Read our <a href="#" class="font-medium text-primary-500 hover:underline dark:text-primary-500">Privacy Policy</a>.</p> </form>
<form> <label for="email-adress-icon" class="font-medium text-sm text-slate-600 dark:text-slate-400">Your Email</label> <div class="relative"> <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> <i class="ti ti-mail z-[1] dark:text-slate-500"></i> </div> <input type="text" id="email-adress-icon" 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 pl-10 p-2.5" placeholder="name@t-wind.com"> </div> </form>
Alright! Username available!
Oops! Username already taken!
<form> <div class="mb-2"> <label for="username-success" class="block mb-2 text-sm font-medium text-green-700 dark:text-green-500">Your name</label> <input type="text" id="username-success" class="bg-green-50 border border-green-500 text-green-900 placeholder-green-700 rounded-md focus:outline-none focus:ring-0 block w-full px-3 py-1 dark:bg-green-100 dark:border-green-400" placeholder="Bonnie Green"> <p class="mt-2 text-sm text-green-600 dark:text-green-500"><span class="font-medium">Alright!</span> Username available!</p> </div> <div> <label for="username-error" class="block mb-2 text-sm font-medium text-red-700 dark:text-red-500">Your name</label> <input type="text" id="username-error" class="bg-red-50 border border-red-500 text-red-900 placeholder-red-700 rounded-md focus:outline-none focus:ring-0 block w-full px-3 py-1 dark:bg-red-100 dark:border-red-400" placeholder="Bonnie Green"> <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> Username already taken!</p> </div> </form>
<form> <label for="message" class="font-medium text-sm text-slate-600 dark:text-slate-400">Your message</label> <textarea id="message" rows="4" 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" placeholder="Leave a comment..."></textarea> </form>
<form> <label for="countries" class="font-medium text-sm text-slate-600 dark:text-slate-400">Select your country</label> <select id="countries" class="w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-[6.5px] 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> </form>
<form> <label class="font-medium text-sm text-slate-600 dark:text-slate-400" for="user_avatar">Upload file</label> <input 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-[1px] 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" aria-describedby="user_avatar_help" id="user_avatar" type="file"> <div class="mt-1 text-sm text-gray-500 dark:text-gray-300" id="user_avatar_help">A profile picture is useful to confirm your are logged into your account</div> </form>
<form> <label class="custom-label block dark:text-slate-300"> <div class="bg-white dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded w-4 h-4 inline-block leading-4 text-center -mb-[3px]"> <input type="checkbox" class="hidden" checked> <i class="fas fa-check hidden text-xs text-slate-700 dark:text-slate-200"></i> </div> Light </label> <label class="custom-label block dark:text-slate-300"> <div class="bg-white dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded w-4 h-4 inline-block leading-4 text-center -mb-[3px]"> <input type="checkbox" class="hidden" checked> <i class="fas fa-check hidden text-xs text-green-500"></i> </div> Green </label> <label class="custom-label block dark:text-slate-300"> <div class="bg-white dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded w-4 h-4 inline-block leading-4 text-center -mb-[3px]"> <input type="checkbox" class="hidden" checked> <i class="fas fa-check hidden text-xs text-blue-500"></i> </div> Blue </label> <label class="custom-label block dark:text-slate-300"> <div class="bg-white dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded w-4 h-4 inline-block leading-4 text-center -mb-[3px]"> <input type="checkbox" class="hidden" checked> <i class="fas fa-check hidden text-xs text-red-500"></i> </div> Red </label> <label class="custom-label block dark:text-slate-300"> <div class="bg-white dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded w-4 h-4 inline-block leading-4 text-center -mb-[3px]"> <input type="checkbox" class="hidden" checked> <i class="fas fa-check hidden text-xs text-purple-500"></i> </div> Purple </label> </form>
<fieldset> <legend class="sr-only">Countries</legend> <div class="flex items-center mb-3"> <input id="country-option-1" type="radio" name="countries" value="USA" class="w-4 h-4 border-gray-300 dark:focus:bg-blue-600 dark:bg-gray-700 dark:border-gray-600" aria-labelledby="country-option-1" aria-describedby="country-option-1" checked> <label for="country-option-1" class="block ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"> United States </label> </div> <div class="flex items-center mb-3"> <input id="country-option-2" type="radio" name="countries" value="Germany" class="w-4 h-4 border-gray-300 dark:focus:bg-blue-600 dark:bg-gray-700 dark:border-gray-600" aria-labelledby="country-option-2" aria-describedby="country-option-2"> <label for="country-option-2" class="block ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"> Germany </label> </div> <div class="flex items-center mb-3"> <input id="country-option-3" type="radio" name="countries" value="Spain" class="w-4 h-4 border-gray-300 dark:bg-gray-700 dark:border-gray-600" aria-labelledby="country-option-3" aria-describedby="country-option-3"> <label for="country-option-3" class="block ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"> Spain </label> </div> <div class="flex items-center"> <input id="option-disabled" type="radio" name="countries" value="China" class="w-4 h-4 border-gray-200 dark:bg-gray-700 dark:border-gray-600" aria-labelledby="option-disabled" aria-describedby="option-disabled" disabled> <label for="option-disabled" class="block ml-2 text-sm font-medium text-gray-300 dark:text-gray-600"> China (disabled) </label> </div> </fieldset>
<form> <div class="flex items-center"> <input type="checkbox" id="switch-1" class="hidden"> <label for="switch-1" id="switch_1" class="custom-switch relative border border-slate-300 mr-2 w-8 h-4 rounded-full bg-slate-50 dark:bg-slate-700 dark:border-slate-600 cursor-pointer"></label> <label for="switch-1" class="dark:text-slate-400">Close</label> </div> <div class="flex items-center"> <input type="checkbox" id="switch-2" class="hidden" checked> <label for="switch-2" id="switch_2" class="custom-switch switch-green relative border border-slate-300 mr-2 w-8 h-4 rounded-full bg-slate-50 dark:bg-slate-700 dark:border-slate-600 cursor-pointer"></label> <label for="switch-2" class="dark:text-slate-400">Active</label> </div> </form>
