Layout

Full width

Example label

Another label

                
                  <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-3 px-5 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-400 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-3 px-5 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-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="formGroupExampleInput2" placeholder="Another input placeholder">
                  </div>

Responsive Grid

                
                  <div class="flex flex-wrap lsdfdfsdafd -mx-4">
                    <div class="flex-shrink max-w-full pyaieolaksj w-full lg:w-1/2 mb-6 lg:mb-0">
                      <input type="text" class="w-full leading-5 relative py-3 px-5 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-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" placeholder="First name" aria-label="First name">
                    </div>
                    <div class="flex-shrink max-w-full pyaieolaksj w-full lg:w-1/2 mb-6 lg:mb-0">
                      <input type="text" class="w-full leading-5 relative py-3 px-5 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-400 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

Email

Password

Address

Address 2

City

State

Zip

I agree to the Terms of Use

                
                  <form class="flex flex-wrap lsdfdfsdafd -mx-4">
                    <div class="flex-shrink max-w-full pyaieolaksj 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-3 px-5 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-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inputEmail4">
                    </div>
                    <div class="flex-shrink max-w-full pyaieolaksj 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-3 px-5 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-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inputPassword4">
                    </div>
                    <div class="flex-shrink max-w-full pyaieolaksj w-full mb-6">
                      <label for="inputAddress" class="inline-block mb-2">Address</label>
                      <input type="text" class="w-full leading-5 relative py-3 px-5 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-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inputAddress" placeholder="1234 Main St">
                    </div>
                    <div class="flex-shrink max-w-full pyaieolaksj 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-3 px-5 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-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inputAddress2" placeholder="Apartment, studio, or floor">
                    </div>
                    <div class="flex-shrink max-w-full pyaieolaksj 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-3 px-5 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-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inputCity">
                    </div>
                    <div class="flex-shrink max-w-full pyaieolaksj 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-3 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 select-caret appearance-none dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600">
                        <option selected>Choose...</option>
                        <option>...</option>
                      </select>
                    </div>
                    <div class="flex-shrink max-w-full pyaieolaksj 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-3 px-5 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-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inputZip">
                    </div>
                    <div class="flex-shrink max-w-full pyaieolaksj w-full mb-6">
                      <label class="flex pdskdmsdnjw">
                        <input type="checkbox" name="checked-demo" value="1" class="form-checkbox h-5 w-5 text-primary-500 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded focus:outline-none">
                        <span class="text-gray-700 ms-2">I agree to the Terms of Use</span>
                      </label>
                    </div>
                    <div class="flex-shrink max-w-full pyaieolaksj w-full">
                      <button type="submit" class="py-3 px-5 inline-block text-center rounded-md leading-normal text-gray-100 bg-primary-700 border border-primary-700 hover:text-white hover:bg-primary-800 hover:ring-0 hover:border-primary-800 focus:bg-primary-800 focus:border-primary-800 focus:outline-none focus:ring-0">Register now</button>
                    </div>
                  </form>