JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="contact-form" id="economic">
	<a href="#" class="close" id="economic_close">
        <i class="fa fa-times"></i>
    </a>

	<form id="economic_form" class="needs-validation" novalidate="">
		<div class="control">
			<input type="text" id="economic_name" class="is-invalid" />
			<label for="economic_name">
				<span style="color: red">*</span>
				{{ gettext('Name') }}
			</label>
			<div
				id="name-validation"
				class="custom-validate"
				style="padding-top: 10px; color: #dc3545"
			></div>
		</div>
		<input
			type="tel"
			id="economic_tel"
			data-number=""
			required
			class="is-invalid"
		/>
		<label for="economic_tel" style="display: none" id="labelTel">
			<span style="color: red">*</span>
			{{ gettext('Phone') }}
		</label>
		<div id="modal3-msg" class="custom-validate" style="color: #dc3545"></div>
		<div class="control submit">
			<input
				id="f_submit_1"
				type="submit"
				style="padding: 10px 40px !important"
			/>
		</div>
	</form>
</div>