Cryptoon
wallet
dark mode
Custom Form
#Login Form
Forgot your password? 

<form class="bg-white shadow-md rounded dark:bg-gray-800 p-4">
<input type="hidden" name="remember" value="True">
<div class="rounded-md shadow-sm -space-y-px">
     <div class="grid gap-6">
          <div class="col-span-12">
               <label for="first_name-one" class="block text-sm font-medium text-gray-700 dark:text-gray-300">First name</label>
               <input type="text" name="first_name" id="first_name-one" autocomplete="given-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 dark:border-gray-600 rounded-md dark:bg-gray-700 dark:text-white">
          </div>

          <div class="col-span-12">
               <label for="email_address-one" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
               <input type="text" name="email_address" id="email_address-one" autocomplete="email" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 dark:border-gray-600 rounded-md dark:bg-gray-700 dark:text-white">
          </div>
     </div>
</div>
<div class="flex flex-wrap items-center justify-between my-3 gap-4 ">
     <div class="flex items-center">
          <input id="remember_me-a" name="remember_me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
          <label for="remember_me-a" class="ml-2 block text-sm text-gray-900 dark:text-gray-100 mx-1 truncate text-nowrap">Remember me</label>
     </div>

     <div class="text-sm">
          <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">Forgot your password?</a>
     </div>
</div>
<div>
     <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
          <span class="absolute left-0 inset-y-0 flex items-center pl-3">
               <svg class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="True">
                    <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path>
               </svg>
          </span>
          Sign in
     </button>
</div>
</form>
#Inline Form

<form class="bg-white shadow-md rounded dark:bg-gray-800 p-4">
<div class=" sm:flex sm:items-center mb-5">
     <label for="name-one" class="inline-block mb-3 sm:mb-0 w-20 sm:mr-6 sm:text-right font-bold text-gray-600">Name</label>
     <input type="text" id="name-one" name="name" placeholder="Name" class="flex-1 py-2  border-inherit outline-none bg-white dark:bg-gray-700 border-b-2 border-gray-700 dark:border-gray-200 rounded w-full sm:w-auto">
</div>
<div class=" sm:flex sm:items-center mb-5">
     <label for="twitter-a" class="inline-block mb-3 sm:mb-0 w-20 sm:mr-6 sm:text-right font-bold text-gray-600">Twitter</label>
     <input type="text" id="twitter-a" name="twitter" placeholder="twitter" class="flex-1 py-2  border-inherit outline-none bg-white dark:bg-gray-700 border-b-2 border-gray-700 dark:border-gray-200 rounded w-full sm:w-auto">
</div>
<div class="text-right">
     <button class="py-3 px-8 bg-green-400 text-white font-bold">Submit</button>
</div>
</form>
#Form Grid
Contact Information
About Me

<form class="bg-white shadow-md rounded dark:bg-gray-800 p-4">
<div class="flex flex-wrap">
     <div class="w-full lg:w-6/12 px-4">
          <div class="relative w-full mb-3">
               <label class="block uppercase text-blueGray-600 text-xs font-bold mb-2" htmlfor="grid-password">Username</label>
               <input type="text" class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white dark:bg-gray-700 rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" value="lucky.jesse">
          </div>
     </div>
     <div class="w-full lg:w-6/12 px-4">
          <div class="relative w-full mb-3">
               <label class="block uppercase text-blueGray-600 text-xs font-bold mb-2" htmlfor="grid-password">Email address</label>
               <input type="email" class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white dark:bg-gray-700 rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" value="jesse@example.com">
          </div>
     </div>
     <div class="w-full lg:w-6/12 px-4">
          <div class="relative w-full mb-3">
               <label class="block uppercase text-blueGray-600 text-xs font-bold mb-2" htmlfor="grid-password">First Name</label>
               <input type="text" class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white dark:bg-gray-700 rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" value="Lucky">
          </div>
     </div>
     <div class="w-full lg:w-6/12 px-4">
          <div class="relative w-full mb-3">
               <label class="block uppercase text-blueGray-600 text-xs font-bold mb-2" htmlfor="grid-password">Last Name</label>
               <input type="text" class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white dark:bg-gray-700 rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" value="Jesse">
          </div>
     </div>
</div>

<hr class="mt-6 border-b-1 border-blueGray-300">

<h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">Contact Information</h6>
<div class="flex flex-wrap">
     <div class="w-full lg:w-12/12 px-4">
          <div class="relative w-full mb-3">
               <label class="block uppercase text-blueGray-600 text-xs font-bold mb-2" htmlfor="grid-password">Address</label>
               <input type="text" class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white dark:bg-gray-700 rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09">
          </div>
     </div>
     <div class="w-full lg:w-4/12 px-4">
          <div class="relative w-full mb-3">
               <label class="block uppercase text-blueGray-600 text-xs font-bold mb-2" htmlfor="grid-password">City</label>
               <input type="email" class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white dark:bg-gray-700 rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" value="New York">
          </div>
     </div>
     <div class="w-full lg:w-4/12 px-4">
          <div class="relative w-full mb-3">
               <label class="block uppercase text-blueGray-600 text-xs font-bold mb-2" htmlfor="grid-password">Country</label>
               <input type="text" class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white dark:bg-gray-700 rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" value="United States">
          </div>
     </div>
     <div class="w-full lg:w-4/12 px-4">
          <div class="relative w-full mb-3">
               <label class="block uppercase text-blueGray-600 text-xs font-bold mb-2" htmlfor="grid-password">Postal Code</label>
               <input type="text" class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white dark:bg-gray-700 rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" value="Postal Code">
          </div>
     </div>
</div>

<hr class="mt-6 border-b-1 border-blueGray-300">

<h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">About Me</h6>
<div class="flex flex-wrap">
     <div class="w-full lg:w-12/12 px-4">
          <div class="relative w-full mb-3">
               <label class="block uppercase text-blueGray-600 text-xs font-bold mb-2" htmlfor="grid-password">About me</label>
               <textarea type="text" class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white dark:bg-gray-700 rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" rows="4"> A beautiful UI Kit and Admin for JavaScript & Tailwind CSS. It is Freeand Open Source.</textarea>
          </div>
     </div>
</div>
</form>
#Form Grid

or drag and drop

PNG, JPG, GIF up to 10MB


<form class="bg-white shadow-md rounded dark:bg-gray-800 p-4">
<div class="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2">
     <div>
          <label class="text-gray-800 dark:text-gray-200" for="username">Username</label>
          <input id="username" type="text" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
     </div>
     <div>
          <label class="text-gray-800 dark:text-gray-200" for="emailAddress-in">Email Address</label>
          <input id="emailAddress-in" type="email" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
     </div>
     <div>
          <label class="text-gray-800 dark:text-gray-200" for="password-a">Password</label>
          <input id="password-a" type="password" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
     </div>
     <div>
          <label class="text-gray-800 dark:text-gray-200" for="passwordConfirmation">Password Confirmation</label>
          <input id="passwordConfirmation" type="password" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
     </div>
     <div>
          <label class="text-gray-800 dark:text-gray-200" for="passwordConfirmation">Color</label>
          <input id="color" type="color" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
     </div>
     <div>
          <label class="text-gray-800 dark:text-gray-200" for="passwordConfirmation">Select</label>
          <select class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
               <option>Surabaya</option>
               <option>Jakarta</option>
               <option>Tangerang</option>
               <option>Bandung</option>
          </select>
     </div>
     <div>
          <label class="text-gray-800 dark:text-gray-200" for="passwordConfirmation">Range</label>
          <input id="range" type="range" class="block w-full py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
     </div>
     <div>
          <label class="text-gray-800 dark:text-gray-200" for="passwordConfirmation">Date</label>
          <input id="date" type="date" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
     </div>
     <div>
          <label class="text-gray-800 dark:text-gray-200" for="passwordConfirmation">Text Area</label>
          <textarea id="textarea" type="textarea" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"></textarea>
     </div>
     <div>
          <label class="block text-sm font-medium text-gray-800">Image</label>
          <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
               <div class="space-y-1 text-center">
                    <svg class="mx-auto h-12 w-12 text-gray-800" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
                    <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <div class="flex text-sm text-gray-600">
                    <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
                         <span class="">Upload a file</span>
                         <input id="file-upload" name="file-upload" type="file" class="sr-only">
                    </label>
                    <p class="pl-1 text-gray-800">or drag and drop</p>
                    </div>
                    <p class="text-xs text-gray-800">PNG, JPG, GIF up to 10MB</p>
               </div>
          </div>
     </div>
</div>
<div class="flex justify-end mt-6">
     <button class="px-6 py-2 leading-5 text-gray-800 transition-colors duration-200 transform bg-pink-500 rounded-md hover:bg-pink-700 focus:outline-none focus:bg-gray-600">Save</button>
</div>
</form>
#Login Form

Welcome Back

Forgot Your Password? 

<form class="form-horizontal w-3/4 mx-auto" method="POST" action="#">
<div class="flex flex-col mt-4">
     <input id="email-two" type="text" class="flex-grow h-8 px-2 border rounded border-grey-400 dark:bg-gray-700" name="email" value="" placeholder="Email">
</div>
<div class="flex flex-col mt-4">
     <input type="password" class="flex-grow h-8 px-2 rounded border border-grey-400 dark:bg-gray-700" name="password" required="" placeholder="Password">
</div>
<div class="flex items-center mt-4">
     <input type="checkbox" name="remember" id="remember-a" class="mr-2">
     <label for="remember-a" class="text-sm text-grey-dark">Remember Me</label>
</div>
<div class="flex flex-col mt-8">
     <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white text-sm font-semibold py-2 px-4 rounded">Login</button>
</div>
</form>