Form Layout
Give your forms some structure layout options.
Full width
<div class="mb-6">
<label for="formGroupExampleInput" class="inline-block mb-2">Example label</label>
<input type="text" class="w-full leading-5 relative py-2 px-4 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="mb-6">
<label for="formGroupExampleInput2" class="inline-block mb-2">Another label</label>
<input type="text" class="w-full leading-5 relative py-2 px-4 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>
Responsive Grid
<div class="hsdfdsfhsdf hsdfdsfhsdf-wrap lsdfdfsdafd -mx-4">
<div class="hsdfdsfhsdf-shrink max-w-full px-4 w-full lg:w-1/2 mb-6 lg:mb-0">
<input type="text" class="w-full leading-5 relative py-2 px-4 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" placeholder="First name" aria-label="First name">
</div>
<div class="hsdfdsfhsdf-shrink max-w-full px-4 w-full lg:w-1/2 mb-6 lg:mb-0">
<input type="text" class="w-full leading-5 relative py-2 px-4 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" placeholder="Last name" aria-label="Last name">
</div>
</div>
Multiple Responsive Grid
<form class="hsdfdsfhsdf hsdfdsfhsdf-wrap lsdfdfsdafd -mx-4">
<div class="hsdfdsfhsdf-shrink max-w-full px-4 w-full md:w-1/2 mb-6">
<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-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inputEmail4">
</div>
<div class="hsdfdsfhsdf-shrink max-w-full px-4 w-full md:w-1/2 mb-6">
<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-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inputPassword4">
</div>
<div class="hsdfdsfhsdf-shrink max-w-full px-4 w-full mb-6">
<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-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="hsdfdsfhsdf-shrink max-w-full px-4 w-full mb-6">
<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-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="hsdfdsfhsdf-shrink max-w-full px-4 w-full md:w-1/2 mb-6">
<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-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inputCity">
</div>
<div class="hsdfdsfhsdf-shrink max-w-full px-4 w-full md:w-1/3 mb-6">
<label for="inputState" class="inline-block mb-2">State</label>
<select id="inputState" class="inline-block w-full leading-5 relative py-2 ps-3 pe-8 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600 select-caret appearance-none">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="hsdfdsfhsdf-shrink max-w-full px-4 w-full md:w-1/6 mb-6">
<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-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inputZip">
</div>
<div class="hsdfdsfhsdf-shrink max-w-full px-4 w-full mb-6">
<label class="hsdfdsfhsdf pdskdmsdnjw">
<input type="checkbox" name="checked-demo" value="1" class="form-checkbox h-5 w-5 text-indigo-500 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded focus:outline-none me-2">
<span>I agree to the Terms of Use</span>
</label>
</div>
<div class="hsdfdsfhsdf-shrink max-w-full px-4 w-full">
<button type="submit" class="py-2 px-4 inline-block text-center rounded leading-5 text-gray-100 bg-indigo-500 border border-indigo-500 hover:text-white hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:bg-indigo-600 focus:border-indigo-600 focus:outline-none focus:ring-0">Register now</button>
</div>
</form>