Input group

Easily extend form by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
@example.com
Your vanity URL
https://example.com/users/
$ .00
With textarea
                
                  <div class="flex flex-wrap items-stretch w-full relative mb-6">
                    <input type="email" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-3 px-5 ltr:rounded-l-md rtl:rounded-r-md 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" name="email" required="" placeholder="Enter you email address" aria-label="subcribe newsletter">
                    <div class="flex -mr-px">
                      <button class="flex items-center py-3 px-5 -ml-1 ltr:rounded-r-md rtl:rounded-l-md leading-5 text-gray-100 bg-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0" type="submit">Subscribe</button>
                    </div>
                  </div>

                  <div class="flex flex-wrap items-stretch w-full relative mb-6">
                    <span class="flex items-center py-3 px-5 -mr-1 ltr:rounded-l-md rtl:rounded-r-md leading-5 text-gray-700 bg-gray-100 border border-gray-300 dark:text-gray-200 dark:bg-gray-900 dark:bg-opacity-40 dark:border-gray-700" id="basic-addon1">@</span>
                    <input type="text" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-3 px-5 ltr:rounded-r-md rtl:rounded-l-md 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="Username" aria-label="Username" aria-describedby="basic-addon1">
                  </div>

                  <div class="flex flex-wrap items-stretch w-full relative mb-6">
                    <input type="text" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-3 px-5 ltr:rounded-l-md rtl:rounded-r-md 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="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
                    <span class="flex items-center py-3 px-5 -ml-1 ltr:rounded-r-md rtl:rounded-l-md leading-5 text-gray-700 bg-gray-100 border border-gray-300 dark:text-gray-200 dark:bg-gray-900 dark:bg-opacity-40 dark:border-gray-700" id="basic-addon2">@example.com</span>
                  </div>

                  <label for="basic-url" class="inline-block mb-2">Your vanity URL</label>
                  <div class="flex flex-wrap items-stretch w-full relative mb-6">
                    <span class="flex items-center py-3 px-5 -mr-1 ltr:rounded-l-md rtl:rounded-r-md leading-5 text-gray-700 bg-gray-100 border border-gray-300 dark:text-gray-200 dark:bg-gray-900 dark:bg-opacity-40 dark:border-gray-700" id="basic-addon3">https://example.com/users/</span>
                    <input type="text" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-3 px-5 ltr:rounded-r-md rtl:rounded-l-md 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="basic-url" aria-describedby="basic-addon3">
                  </div>

                  <div class="flex flex-wrap items-stretch w-full relative mb-6">
                    <span class="flex items-center py-3 px-5 -mr-1 ltr:rounded-l-md rtl:rounded-r-md leading-5 text-gray-700 bg-gray-100 border border-gray-300 dark:text-gray-200 dark:bg-gray-900 dark:bg-opacity-40 dark:border-gray-700">$</span>
                    <input type="text" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-3 px-5 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" aria-label="Amount (to the nearest dollar)">
                    <span class="flex items-center py-3 px-5 -ml-1 ltr:rounded-r-md rtl:rounded-l-md leading-5 text-gray-700 bg-gray-100 border border-gray-300 dark:text-gray-200 dark:bg-gray-900 dark:bg-opacity-40 dark:border-gray-700">.00</span>
                  </div>

                  <div class="flex flex-wrap items-stretch w-full relative mb-6">
                    <input type="text" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-3 px-5 ltr:rounded-l-md rtl:rounded-r-md 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="Username" aria-label="Username">
                    <span class="flex items-center py-3 px-5 -mx-1 ltr:rounded-l-md rtl:rounded-r-md leading-5 text-gray-700 bg-gray-100 border border-gray-300 dark:text-gray-200 dark:bg-gray-900 dark:bg-opacity-40 dark:border-gray-700">@</span>
                    <input type="text" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-3 px-5 ltr:rounded-r-md rtl:rounded-l-md 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="Server" aria-label="Server">
                  </div>

                  <div class="flex flex-wrap items-stretch w-full relative mb-6">
                    <span class="flex items-center py-3 px-5 -mr-1 ltr:rounded-l-md rtl:rounded-r-md leading-5 text-gray-700 bg-gray-100 border border-gray-300 dark:text-gray-200 dark:bg-gray-900 dark:bg-opacity-40 dark:border-gray-700">With textarea</span>
                    <textarea class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-3 px-5 ltr:rounded-r-md rtl:rounded-l-md 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" aria-label="With textarea"></textarea>
                  </div>