JSFiddle - React, Tailwind, and code Playground

by SpeakeazyYT

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="item-views blocks row maxwidth-theme">
    <h2>Рассчитать стоимость дома</h2>

    <div class="col-md-12 hide" style="color: red;" id="alertmsg"></div>
    <form id="ajax_form" class="form-visual" method="post">
        <div class="row">
            <div class="col-md-12">
                <a id="inner_area"></a>
                <div class="row">
                    <div class="pb-10 col-md-6">
                        <label>Внутреняя площадь дома, м2 *</label>
                        <input type="number" class="form-control form-postroeno inp-height" value="120" name="inner_area" id="area" onchange="changeText()">
                    </div>
                    <div class="pb-10 col-md-6">
                        <label>Количество этажей *</label>
                        <select class="form-control form-postroeno inp-height" name="floors" id="floors" onchange="changeText()">
                            <option value="0">Не выбрано</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3" selected="selected">1+мансарда</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

CSS

.pb-10 {
	padding-bottom: 10px;
}

.pt-10 {
	padding-top: 10px;
}

.s-header {
	font-size: 20px;
    margin-bottom: 10px;
}

.clear-ft {
	background: none!important;
	display: block!important;
	position: unset!important;
	box-shadow: unset!important;
	-webkit-box-shadow: unset!important;
    z-index: unset!important;
}

.inp-height {
	height: 40px!important;
}

.logo-row .logo {
	max-width: 700px!important;
}

.img-timeline {
	max-height: 100px;
}

.anchor {
	margin-top: -59px!important;
    padding-top: 59px!important;
}

.form-postroeno {
    border: 1px solid #e08543!important;
	background: none!important;
}

.form-visual {
    padding: 25px;
    border: 2px solid #e08543;
    border-radius: 10px;
}

div.ks-cboxtags{
    text-align: center;
}

div.ks-cboxtags label{
    display: inline-block;
    border: 1px solid #e08543;
    color: #555;
    border-radius: 10px;
	margin-bottom: 0px!important;
	width: 100%;
}

div.ks-cboxtags label {
	padding: 6px 12px;
    cursor: pointer;
}

div.ks-cboxtags label::before {
    display: inline-block;
    padding: 2px 2px 2px 2px;
}

div.ks-cboxtags input[type="checkbox"]:checked + label {
    background-color: #e08543;
    color: #fff;
}

div.ks-cboxtags input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

.form-postroeno[disabled] {
	border-color: #999!important;
	background-color: #eee!important;
}

JavaScript

const area = document.querySelector('#area')
	const floors = document.querySelector('#floors')

	area.addEventListener('change', refresh)
	floors.addEventListener('change', refresh)

	function refresh() {
	  var value = area.value

	  const notify = function(mess) {
		$('#inner_area').html(mess);
	  }

	  const twoFloors = (floors.value == 2)

	  if (value > 300) {
		notify("Дома рассчитываются индивидуально!<br>");
		value = 300;
	  } else if (twoFloors && value < 120) {
		notify("Дома рассчитываются индивидуально!<br>");
		value = 120;
	  } else if (value < 90) {
		notify("Дома рассчитываются индивидуально!<br>");
		value = 90;
	  } else {
		notify("")
	  }

	  area.value = value;
	}
  
function changeText() {
	alert(area.value)
}