JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<div class="form popup">
	<!--noindex-->
	<div class="form-header">
					<div class="text">
				<div class="title">Запрос стоимости дома</div>

							</div>
					</div>
					

<form name="aspro_allcorp2_order_product_s1" action="/ajax/form.php?id=3&amp;data-trigger=%7B%22class%22%3A%22btn+btn-default+btn-lg+animate-load%22%2C%22data-event%22%3A%22jqm%22%2C%22data-param-id%22%3A%223%22%2C%22data-name%22%3A%22order_product%22%2C%22data-autoload-product%22%3A%22%D0%9F%D1%80%D0%BE%D0%B5%D0%BA%D1%82+%D0%B4%D0%BE%D0%BC%D0%B0+%D0%B8%D0%B7+%D0%BA%D0%BB%D0%B5%D0%B5%D0%BD%D0%BE%D0%B3%D0%BE+%D0%B1%D1%80%D1%83%D1%81%D0%B0+%D0%92%D0%B8%D1%82%D0%BE%D1%80%D0%B8%D1%8F%22%7D" method="POST" enctype="multipart/form-data" novalidate="novalidate"><input type="hidden" name="bxajaxid" id="bxajaxid_8bef57243ca7db6a589ddd2a9270615b_Ar8Szp" value="8bef57243ca7db6a589ddd2a9270615b"><input type="hidden" name="AJAX_CALL" value="Y"><script type="text/javascript">
function _processform_Ar8Szp(){
	if (BX('bxajaxid_8bef57243ca7db6a589ddd2a9270615b_Ar8Szp'))
	{
		var obForm = BX('bxajaxid_8bef57243ca7db6a589ddd2a9270615b_Ar8Szp').form;
		BX.bind(obForm, 'submit', function() {BX.ajax.submitComponentForm(this, 'comp_8bef57243ca7db6a589ddd2a9270615b', true)});
	}
	BX.removeCustomEvent('onAjaxSuccess', _processform_Ar8Szp);
}
if (BX('bxajaxid_8bef57243ca7db6a589ddd2a9270615b_Ar8Szp'))
	_processform_Ar8Szp();
else
	BX.addCustomEvent('onAjaxSuccess', _processform_Ar8Szp);
</script><input type="hidden" name="bxajaxid" id="bxajaxid_72b62651e77f6e85d0b002ad6aa38ca3_8BACKi" value="72b62651e77f6e85d0b002ad6aa38ca3"><input type="hidden" name="AJAX_CALL" value="Y"><script type="text/javascript">
function _processform_8BACKi(){
	if (BX('bxajaxid_72b62651e77f6e85d0b002ad6aa38ca3_8BACKi'))
	{
		var obForm = BX('bxajaxid_72b62651e77f6e85d0b002ad6aa38ca3_8BACKi').form;
		BX.bind(obForm, 'submit', function() {BX.ajax.submitComponentForm(this, 'comp_72b62651e77f6e85d0b002ad6aa38ca3',...

CSS

.form {
    position: relative;
}

.form.sending:before {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: #fff url('/bitrix/templates/aspro-allcorp2/images/loaders/pl3.gif') center no-repeat;
    z-index: 1000;
    opacity: 0.8;
}
.form.contacts .title {
    border-color: #48a216;
}

.form .form-header {
    border-top-color: #48a216 !important;
}

.form-header i {
    background: #48a216;
}

.banners-small .item .title a:hover,.more_text_ajax:hover {
    color: #48a216 !important;
}
.form .form-header .text {
    color: #777777;
    font-size: 0.867em;
}

.form .form-header .title {
    font-size: 1.866em;
    font-weight: 700;
    line-height: 28px;
    margin-bottom: 27px;
    color: #222;
}

.form .form-header p:last-child {
    margin: 0;
}

.form.v_POPUP .form-header {
    padding-bottom: 10px;
}

.form .form-body {
    padding: 15px 0;
    background: white;
    padding-bottom: 0;
}

.form .form-error {
    padding-left: 15px;
    padding-right: 15px;
}

.form:not(.contacts) .form-error {
    border-radius: 0;
}

.form .form-group {
    margin-bottom: 33px;
    position: relative;
}

.form .form-group .form-group {
    margin: 0px;
}

form .form-group.animated-labels.input-filed.bg-color label:not(.error) {
}

.form .form-body > .row:last-of-type .form-group {
    margin-bottom: 0px;
}

.form .form-group .input {
    position: relative;
}

.form .form-group i {
    position: absolute;
    top: 16px;
    right: 10px;
    font-size: 17px;
    color: #c4ccd1;
}

.form .form-group .hint {
    font-size: 11px;
    line-height: 18px;
    margin-top: 7px;
}

.form .form-group input[type="checkbox"] + label:not(.error) {
    margin-left: 10px;
    vertical-align: top;
}

.form .form-group input[type="checkbox"] + label:not(.error):before, .form .form-group input[type="checkbox"] + label:not(.error):after {
    top: 4px;
}

.form .bx_filter .form-group input[type="checkbox"]...