JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<form data-forminate="sender_id_approval" autocomplete="nope">

					<div class="add_config_form__rows">

						<div class="form_row">
							<div class="field__unit">
								<div class="field__label">Your desired sender ID</div>
								<div class="field__desc">Sender ID: the name your clients will see when one of your texts arrive on their phones. Presumably, your company's name.</div>
								<div class="field__block field__block--fw">
									<div class="field__wrapper">
										<input data-forminate="sender_id" class="field" type="text" value="{{mail_to_send_info}}" placeholder="eg: My Dentist">
									</div>
								</div>
							</div>
						</div>

						<div class="form_row">
							<div class="field__unit">
								<div class="field__label">Choose a verfication option</div>
								<div class="field__desc">So we can be sure your desired sender ID is directly related to your business we need to verify your business ownership in one of three ways:</div>
								<div class="field__block field__block--fw">
									<div class="field__wrapper field__wrapper--select">
										<select data-forminate="selected_verification_option" value="{{selected_verification_option}}" class="field field--select">
											<option selected disabled>Select option</option>
											<option value="email">Email confirmation</option>
											<option value="dns">DNS text entry</option>
											<option value="server_file">Server file</option>
										</select>
									</div>
								</div>
							</div>
						</div>

						{{#if selected_verification_option === 'email'}}

							<div class="whitelist_instructions">
								<p class="t-h--4">Selected verification option: Email confirmation</p>

								<p class="modal__p">
									If your business owns a domain name that reflects your business name, we can use that to confirm your identity and establish the validity of the connection to your desired Sender ID.
								</p>

								<p...