Basic example
<div class="block p-6 rounded-lg shadow-lg bg-white max-w-sm">
<form>
<div class="form-group mb-6">
<label for="exampleInputEmail1" class="form-label inline-block mb-2 text-gray-700">Email address</label>
<input type="email" class="form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInputEmail1"
aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="block mt-1 text-xs text-gray-600">We'll never share your email with anyone
else.</small>
</div>
<div class="form-group mb-6">
<label for="exampleInputPassword1" class="form-label inline-block mb-2 text-gray-700">Password</label>
<input type="password" class="form-control block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInputPassword1"
placeholder="Password">
</div>
<div class="form-group form-check mb-6">
<input type="checkbox"
class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
id="exampleCheck1">
<label class="form-check-label inline-block text-gray-800" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="
px-6
py-2.5
bg-blue-600
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-blue-700 hover:shadow-lg
focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-blue-800 active:shadow-lg
transition
duration-150
ease-in-out">Submit</button>
</form>
</div>
Login form
<div class="block p-6 rounded-lg shadow-lg bg-white max-w-sm">
<form>
<div class="form-group mb-6">
<label for="exampleInputEmail2" class="form-label inline-block mb-2 text-gray-700">Email address</label>
<input type="email" class="form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInputEmail2"
aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group mb-6">
<label for="exampleInputPassword2" class="form-label inline-block mb-2 text-gray-700">Password</label>
<input type="password" class="form-control block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInputPassword2"
placeholder="Password">
</div>
<div class="flex justify-between items-center mb-6">
<div class="form-group form-check">
<input type="checkbox"
class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
id="exampleCheck2">
<label class="form-check-label inline-block text-gray-800" for="exampleCheck2">Remember me</label>
</div>
<a href="#!"
class="text-blue-600 hover:text-blue-700 focus:text-blue-700 transition duration-200 ease-in-out">Forgot
password?</a>
</div>
<button type="submit" class="
w-full
px-6
py-2.5
bg-blue-600
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-blue-700 hover:shadow-lg
focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-blue-800 active:shadow-lg
transition
duration-150
ease-in-out">Sign in</button>
<p class="text-gray-800 mt-6 text-center">Not a member? <a href="#!"
class="text-blue-600 hover:text-blue-700 focus:text-blue-700 transition duration-200 ease-in-out">Register</a>
</p>
</form>
</div>
Register form
<div class="block p-6 rounded-lg shadow-lg bg-white max-w-md">
<form>
<div class="grid grid-cols-2 gap-4">
<div class="form-group mb-6">
<input type="text" class="form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInput123"
aria-describedby="emailHelp123" placeholder="First name">
</div>
<div class="form-group mb-6">
<input type="text" class="form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInput124"
aria-describedby="emailHelp124" placeholder="Last name">
</div>
</div>
<div class="form-group mb-6">
<input type="email" class="form-control block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInput125"
placeholder="Email address">
</div>
<div class="form-group mb-6">
<input type="password" class="form-control block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInput126"
placeholder="Password">
</div>
<div class="form-group form-check text-center mb-6">
<input type="checkbox"
class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain mr-2 cursor-pointer"
id="exampleCheck25" checked>
<label class="form-check-label inline-block text-gray-800" for="exampleCheck25">Subscribe to our newsletter</label>
</div>
<button type="submit" class="
w-full
px-6
py-2.5
bg-blue-600
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-blue-700 hover:shadow-lg
focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-blue-800 active:shadow-lg
transition
duration-150
ease-in-out">Sign up</button>
</form>
</div>
Contact form
<div class="block p-6 rounded-lg shadow-lg bg-white max-w-md">
<form>
<div class="form-group mb-6">
<input type="text" class="form-control block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInput7"
placeholder="Name">
</div>
<div class="form-group mb-6">
<input type="email" class="form-control block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInput8"
placeholder="Email address">
</div>
<div class="form-group mb-6">
<textarea
class="
form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none
"
id="exampleFormControlTextarea13"
rows="3"
placeholder="Message"
></textarea>
</div>
<div class="form-group form-check text-center mb-6">
<input type="checkbox"
class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain mr-2 cursor-pointer"
id="exampleCheck87" checked>
<label class="form-check-label inline-block text-gray-800" for="exampleCheck87">Send me a copy of this message</label>
</div>
<button type="submit" class="
w-full
px-6
py-2.5
bg-blue-600
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-blue-700 hover:shadow-lg
focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-blue-800 active:shadow-lg
transition
duration-150
ease-in-out">Send</button>
</form>
</div>
Subscription form
<div class="block p-6 rounded-lg shadow-lg bg-white max-w-sm">
<form>
<div class="form-group mb-6">
<input type="text" class="form-control block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInput90"
placeholder="Name">
</div>
<div class="form-group mb-6">
<input type="email" class="form-control block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInput91"
placeholder="Email address">
</div>
<div class="form-group form-check text-center mb-6">
<input type="checkbox"
class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain mr-2 cursor-pointer"
id="exampleCheck96" checked>
<label class="form-check-label inline-block text-gray-800" for="exampleCheck96">I have read and agree to the terms</label>
</div>
<button type="submit" class="
w-full
px-6
py-2.5
bg-blue-600
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-blue-700 hover:shadow-lg
focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-blue-800 active:shadow-lg
transition
duration-150
ease-in-out">Subscribe</button>
</form>
</div>