Input group

                
                  <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 rounded-s-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 -me-px">
                      <button class="flex pdskdmsdnjw py-3 px-5 -ms-1 rounded-e-md leading-5 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" type="submit">Subscribe</button>
                    </div>
                  </div>

                  <div class="flex flex-wrap items-stretch w-full relative mb-6">
                    <span class="flex pdskdmsdnjw py-3 px-5 -me-1 rounded-s-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 rounded-e-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 rounded-s-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 pdskdmsdnjw py-3 px-5 -ms-1 rounded-e-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 pdskdmsdnjw py-3 px-5 -me-1 rounded-s-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 rounded-e-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 pdskdmsdnjw py-3 px-5 -me-1 rounded-s-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 pdskdmsdnjw py-3 px-5 -ms-1 rounded-e-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 rounded-s-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 pdskdmsdnjw py-3 px-5 -mx-1 rounded-s-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 rounded-e-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 pdskdmsdnjw py-3 px-5 -me-1 rounded-s-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 rounded-e-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>