<!-- Input text -->
<div class="mb-6">
  <label for="exampleInput1" class="inline-block mb-2">Input text</label>
  <input type="text" class="w-full leading-5 relative py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="exampleInput1" placeholder="Full name">
</div>

<!-- Textarea -->
<div class="mb-6">
  <label for="exampleTextarea1" class="inline-block mb-2">Textarea</label>
  <textarea class="w-full leading-5 relative py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="exampleTextarea1" rows="4"></textarea>
</div>

<!-- Input email -->
<div class="mb-6">
  <label for="exampleInputb" class="inline-block mb-2">Input email</label>
  <input type="email" class="w-full leading-5 relative py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="exampleInputb" placeholder="mail@domain.com">
</div>

<!-- Input phone -->
<div class="mb-6">
  <label for="exampleInputc" class="inline-block mb-2">Input phone</label>
  <input type="tel" class="w-full leading-5 relative py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="exampleInputc">
</div>

<!-- Input Password -->
<div class="mb-6">
  <label for="exampleInputd" class="inline-block mb-2">Input Password</label>
  <input type="password" class="w-full leading-5 relative py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="exampleInputd">
</div>

<!-- Input Url -->
<div class="mb-6">
  <label for="exampleInpute" class="inline-block mb-2">Input Url</label>
  <input type="url" class="w-full leading-5 relative py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="exampleInpute" placeholder="https://">
</div>

<!-- Input Number -->
<div class="mb-6">
  <label for="exampleInputnum" class="inline-block mb-2">Input Number</label>
  <input type="number" class="w-full leading-5 relative py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="exampleInputnum" placeholder="https://">
</div>

<!-- Input date -->
<div class="mb-6">
  <label for="exampleInputa" class="inline-block mb-2">Input date</label>
  <input type="date" class="w-full leading-5 relative py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="exampleInputa">
</div>

<!-- Input time -->
<div class="mb-6">
  <label for="exampleInputf" class="inline-block mb-2">Input time</label>
  <input type="time" class="w-full leading-5 relative py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="exampleInputf">
</div>

<!-- Input Search -->
<div class="mb-6">
  <label for="exampleInputg" class="inline-block mb-2">Input Search</label>
  <input type="search" class="w-full leading-5 relative py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="exampleInputg" placeholder="Search...">
</div>

<!-- Datalist -->
<div class="mb-6">
  <label for="exampleDataList" class="inline-block mb-2">Datalist</label>
  <input class="w-full leading-5 relative py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
  <datalist id="datalistOptions">
    <option value="Burger">
    </option><option value="Pizza">
    </option><option value="Fried Rice">
    </option><option value="Fried Chicken">
    </option><option value="Kebab">
  </option></datalist>
</div>

<!-- Multiple upload -->
<div class="mb-6">
  <label for="formFileMultiple" class="inline-block mb-2">Multiple upload</label>
  <input class="w-full leading-5 relative py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" type="file" id="formFileMultiple" multiple="">
</div>

<!-- Color picker -->
<div class="mb-6">
  <label for="exampleColorInput" class="inline-block mb-2">Color picker</label>
  <input type="color" class="block w-8 h-8 leading-5 relative rounded text-slate-800 bg-white overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="exampleColorInput" value="" title="Choose your color">
</div>

<!-- Disabled input -->
<div class="mb-6">
  <label for="exampleInput1" class="inline-block mb-2">Disabled input</label>
  <input type="text" class="w-full leading-5 relative py-2 px-4 rounded text-slate-800 bg-slate-100 border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600 cursor-not-allowed" id="exampleInput1" placeholder="Disabled input" aria-label="Disabled input example" disabled="">
</div>

<!-- Small -->
<div class="mb-6">
  <label for="exampleInput1" class="inline-block mb-2">Small</label>
  <input type="text" class="w-full leading-5 relative text-sm py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="exampleInput1" placeholder="small">
</div>

<!-- Normal -->
<div class="mb-6">
  <label for="exampleInput1" class="inline-block mb-2">Normal</label>
  <input type="text" class="w-full leading-5 relative py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="exampleInput1" placeholder="normal">
</div>

<!-- Large -->
<div class="mb-6">
  <label for="exampleInput1" class="inline-block mb-2">Large</label>
  <input type="text" class="w-full leading-5 relative text-2xl py-4 px-8 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="exampleInput1" placeholder="large">
</div>

<!-- Input Submit -->
<div class="mb-6">
  <label for="exampleInputh" class="inline-block mb-2">Input Submit</label>
  <input type="submit" class="w-full py-2 px-4 inline-block text-center mb-3 rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0" id="exampleInputh">
</div>

Your vanity URL

<!-- Input email -->
<div class="flex flex-wrap items-stretch w-full relative mb-6">
  <input type="email" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-2 px-4 rounded-l text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" name="email" required="" placeholder="Enter you email address" aria-label="subcribe newsletter">
  <div class="flex -mr-px">
    <button class="flex items-center py-2 px-4 -ml-1 rounded-r leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0" type="submit">Subscribe</button>
  </div>
</div>

<!-- Input username -->
<div class="flex flex-wrap items-stretch w-full relative mb-6">
  <span class="flex items-center py-2 px-4 -mr-1 rounded-l leading-5  bg-slate-100 border border-slate-300 dark:bg-slate-800 dark:border-slate-800" id="basic-addon1">@</span>
  <input type="text" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-2 px-4 rounded-r text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

<!-- Input username 2 -->
<div class="flex flex-wrap items-stretch w-full relative mb-6">
  <input type="text" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-2 px-4 rounded-l text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <span class="flex items-center py-2 px-4 -ml-1 rounded-r leading-5 bg-slate-100 border border-slate-300 dark:bg-slate-800 dark:border-slate-800" id="basic-addon2">@example.com</span>
</div>

<!-- Input url -->
<label for="basic-url" class="inline-block mb-2">Your vanity URL</label>
<div class="flex flex-wrap items-stretch w-full relative mb-6">
  <span class="flex items-center py-2 px-4 -mr-1 rounded-l leading-5  bg-slate-100 border border-slate-300 dark:bg-slate-800 dark:border-slate-800" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-2 px-4 rounded-r text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="basic-url" aria-describedby="basic-addon3">
</div>

<!-- Input pricing -->
<div class="flex flex-wrap items-stretch w-full relative mb-6">
  <span class="flex items-center py-2 px-4 -mr-1 rounded-l leading-5  bg-slate-100 border border-slate-300 dark:bg-slate-800 dark:border-slate-800">$</span>
  <input type="text" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-2 px-4 text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" aria-label="Amount (to the nearest dollar)">
  <span class="flex items-center py-2 px-4 -ml-1 rounded-r leading-5 bg-slate-100 border border-slate-300 dark:bg-slate-800 dark:border-slate-800">.00</span>
</div>

<!-- Input username 3 -->
<div class="flex flex-wrap items-stretch w-full relative mb-6">
  <input type="text" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-2 px-4 rounded-l text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" placeholder="Username" aria-label="Username">
  <span class="flex items-center py-2 px-4 -mx-1 rounded-l leading-5 text-slate-700 dark:text-slate-300 bg-slate-100 border border-slate-300 dark:bg-slate-800 dark:border-slate-800">@</span>
  <input type="text" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-2 px-4 rounded-r text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" placeholder="Server" aria-label="Server">
</div>

<!-- Input textarea -->
<div class="flex flex-wrap items-stretch w-full relative mb-6">
  <span class="flex items-center py-2 px-4 -mr-1 rounded-l leading-5  bg-slate-100 border border-slate-300 dark:bg-slate-900 dark:border-slate-900">Textarea</span>
  <textarea class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-2 px-4 rounded-r text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" rows="4" aria-label="With textarea"></textarea>
</div>

<!-- Default select -->
<div class="mb-6">
  <label for="examplexs" class="inline-block mb-2">Default select</label>
  <select id="examplexs" class="inline-block w-full leading-5 relative py-2 pl-3 pr-8 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600 select-caret appearance-none" aria-label="Default select example">
    <option selected="">Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<!-- Select option group -->
<div class="mb-6">
  <label for="examplex" class="inline-block mb-2">Select option group</label>
  <select id="examplex" class="inline-block w-full leading-5 relative py-2 pl-3 pr-8 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600 select-caret appearance-none" aria-label="Default select example">
    <optgroup label="Swedish Cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="German Cars">
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </optgroup>
  </select>
</div>

<!-- Disabled select -->
<div class="mb-6">
  <label for="examplexl" class="inline-block mb-2">Disabled select</label>
  <select id="examplexl" class="inline-block w-full leading-5 relative py-2 pl-3 pr-8 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600 select-caret appearance-none cursor-not-allowed" aria-label="Disabled select example" disabled="">
    <option selected="">Disabled select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<!-- Checkbox -->
<div class="mb-6">
  <label class="flex items-center">
    <input type="checkbox" name="checked-demo" value="1" class="form-checkbox h-5 w-5 text-cyan-500 dark:bg-slate-700 border border-slate-300 dark:border-slate-700 rounded focus:outline-none mr-3">
    <span>Checkbox</span>
  </label>
</div>

<!-- Default radio -->
<div class="mb-6">
  <div class="flex flex-nowrap flex-row items-center mb-4">
    <input class="form-checkbox h-5 w-5 text-cyan-500 dark:bg-slate-700 border border-slate-300 dark:border-slate-700 focus:outline-none rounded-full mr-3" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
    <label class="inline-block" for="flexRadioDefault1">
      Default radio
    </label>
  </div>
  <div class="flex flex-nowrap flex-row items-center mb-4">
    <input class="form-checkbox h-5 w-5 text-cyan-500 dark:bg-slate-700 border border-slate-300 dark:border-slate-700 focus:outline-none rounded-full mr-3" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked="">
    <label class="inline-block" for="flexRadioDefault2">
      Default checked radio
    </label>
  </div>
</div>

<!-- Switch checkbox -->
<div class="mb-6">
  <div class="relative w-8 py-3">
    <input title="Switch checkbox" type="checkbox" name="lightdarks" id="lightdarks" class="toggle-checkbox absolute block w-5 h-5 rounded-full bg-white dark:bg-slate-700 border-2 dark:border-slate-700 appearance-none cursor-pointer">
    <label for="lightdarks" class="toggle-label block overflow-hidden h-5 rounded-full bg-slate-300 dark:bg-slate-800 cursor-pointer"></label>
  </div>
</div>

<!-- range -->
<div class="mb-6">
  <label for="customRange1" class="inline-block">Example range</label>
  <input type="range" class="w-full h-6 py-1 accent-cyan-500 bg-transparent focus:outline-none focus:ring-0" id="customRange1">
  <span class="block clear-both"></span>
</div>

<!-- disabled range -->
<div class="mb-6">
  <label for="customRange2" class="inline-block">Disabled range</label>
  <input type="range" class="w-full h-6 py-1 bg-transparent focus:outline-none focus:ring-0 cursor-not-allowed" id="customRange2" disabled>
  <span class="block clear-both"></span>
</div>

Email

Password

Address

Address 2

City

State Choose... ...

Zip

I agree to the Terms of Use

Register now

<!-- Form with validation -->
<form class="valid-form flex flex-wrap flex-row -mx-4">
  <div class="form-group flex-shrink max-w-full px-4 w-full md:w-1/2 mb-4">
    <label for="inputEmail4" class="inline-block mb-2">Email</label>
    <input type="email" class="w-full leading-5 relative py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="inputEmail4" required>
  </div>
  <div class="form-group flex-shrink max-w-full px-4 w-full md:w-1/2 mb-4">
    <label for="inputPassword4" class="inline-block mb-2">Password</label>
    <input type="password" class="w-full leading-5 relative py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="inputPassword4" required>
  </div>
  <div class="form-group flex-shrink max-w-full px-4 w-full mb-4">
    <label for="inputAddress" class="inline-block mb-2">Address</label>
    <input type="text" class="w-full leading-5 relative py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="inputAddress" placeholder="1234 Main St" required>
  </div>
  <div class="form-group flex-shrink max-w-full px-4 w-full mb-4">
    <label for="inputAddress2" class="inline-block mb-2">Address 2</label>
    <input type="text" class="w-full leading-5 relative py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="inputAddress2" placeholder="Apartment, studio, or floor" required>
  </div>
  <div class="form-group flex-shrink max-w-full px-4 w-full md:w-1/2 mb-4">
    <label for="inputCity" class="inline-block mb-2">City</label>
    <input type="text" class="w-full leading-5 relative py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="inputCity" required>
  </div>
  <div class="form-group flex-shrink max-w-full px-4 w-full md:w-1/3 mb-4">
    <label for="inputState" class="inline-block mb-2">State</label>
    <select id="inputState" class="inline-block w-full leading-5 relative py-2 pl-3 pr-8 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 select-caret appearance-none dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" required>
      <option>Choose...</option>
      <option>...</option>
    </select>
  </div>
  <div class="form-group flex-shrink max-w-full px-4 w-full md:w-1/6 mb-4">
    <label for="inputZip" class="inline-block mb-2">Zip</label>
    <input type="text" class="w-full leading-5 relative py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="inputZip" required>
  </div>
  <div class="form-group flex-shrink max-w-full px-4 w-full mb-4">
    <label class="flex items-center">
      <input type="checkbox" name="checked-demo" value="1" class="form-checkbox h-5 w-5 text-cyan-500 dark:bg-slate-700 border border-slate-300 dark:border-slate-700 rounded focus:outline-none mr-3" required>
      <span>I agree to the Terms of Use</span>
    </label>
  </div>
  <div class="form-group flex-shrink max-w-full px-4 w-full">
    <button type="submit" class="py-2 px-4 inline-block text-center rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0">Register now</button>
  </div>
</form>