Components
Form layout
<div class="mx-auto max-w-xl">
<form action="" class="space-y-5">
<div>
<label for="example1" class="mb-1 block text-sm font-medium text-gray-700">Email</label>
<input
type="email"
id="example1"
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
placeholder="you@email.com"
/>
</div>
<div>
<label for="example2" class="mb-1 block text-sm font-medium text-gray-700">Password</label>
<input
type="password"
id="example2"
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
placeholder="Password"
/>
</div>
<div class="flex items-center space-x-2">
<input
type="checkbox"
id="example3"
class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
<label for="example3" class="text-sm font-medium text-gray-700">Remember me</label>
</div>
<button
type="button"
class="rounded-lg border border-primary-500 bg-primary-500 px-5 py-2.5 text-center text-sm font-medium text-white shadow-sm transition-all hover:border-primary-700 hover:bg-primary-700 focus:ring focus:ring-primary-200 disabled:cursor-not-allowed disabled:border-primary-300 disabled:bg-primary-300"
>
Submit
</button>
</form>
</div>
<div class="mx-auto max-w-xl">
<form action="" class="space-y-5">
<div class="grid grid-cols-3 items-center">
<label for="example4" class="col-span-1 block text-sm font-medium text-gray-700">Email</label>
<div class="col-span-2">
<input
type="email"
id="example4"
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
placeholder="you@email.com"
/>
</div>
</div>
<div class="grid grid-cols-3 items-center">
<label for="example5" class="col-span-1 block text-sm font-medium text-gray-700">Password</label>
<div class="col-span-2">
<input
type="password"
id="example5"
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
placeholder="Password"
/>
</div>
</div>
<div class="grid grid-cols-3 items-center">
<div class="col-span-2 col-start-2 flex items-center space-x-2">
<input
type="checkbox"
id="example6"
class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
<label for="example6" class="text-sm font-medium text-gray-700">Remember me</label>
</div>
</div>
<div class="grid grid-cols-3 items-center">
<div class="col-span-2 col-start-2">
<button
type="button"
class="rounded-lg border border-primary-500 bg-primary-500 px-5 py-2.5 text-center text-sm font-medium text-white shadow-sm transition-all hover:border-primary-700 hover:bg-primary-700 focus:ring focus:ring-primary-200 disabled:cursor-not-allowed disabled:border-primary-300 disabled:bg-primary-300"
>
Submit
</button>
</div>
</div>
</form>
</div>
<div class="mx-auto max-w-xl">
<form action="" class="space-y-5">
<div class="grid grid-cols-12 gap-5">
<div class="col-span-6">
<label for="example7" class="mb-1 block text-sm font-medium text-gray-700">Email</label>
<input
type="email"
id="example7"
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
placeholder="you@email.com"
/>
</div>
<div class="col-span-6">
<label for="example8" class="mb-1 block text-sm font-medium text-gray-700">Password</label>
<input
type="password"
id="example8"
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
placeholder="you@email.com"
/>
</div>
<div class="col-span-12">
<label for="example9" class="mb-1 block text-sm font-medium text-gray-700">Address</label>
<input
type="text"
id="example9"
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
placeholder="1864 Main Street"
/>
</div>
<div class="col-span-6">
<label for="example10" class="mb-1 block text-sm font-medium text-gray-700">City</label>
<input
type="text"
id="example10"
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
placeholder=""
/>
</div>
<div class="col-span-4">
<label for="example11" class="mb-1 block text-sm font-medium text-gray-700">State</label>
<select
id="example11"
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50"
>
<option value="">Choose</option>
<option value="">State01</option>
<option value="">State02</option>
<option value="">State03</option>
</select>
</div>
<div class="col-span-2">
<label for="example12" class="mb-1 block text-sm font-medium text-gray-700">Zip</label>
<input
type="text"
id="example12"
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
placeholder=""
/>
</div>
<div class="col-span-12 flex items-center space-x-2">
<input
type="checkbox"
id="example13"
class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
<label for="example13" class="text-sm font-medium text-gray-700">Remember me</label>
</div>
<div class="col-span-12">
<button
type="button"
class="rounded-lg border border-primary-500 bg-primary-500 px-5 py-2.5 text-center text-sm font-medium text-white shadow-sm transition-all hover:border-primary-700 hover:bg-primary-700 focus:ring focus:ring-primary-200 disabled:cursor-not-allowed disabled:border-primary-300 disabled:bg-primary-300"
>
Submit
</button>
</div>
</div>
</form>
</div>