JSFiddle - React, Tailwind, and code Playground

by Vaniljs

HTML

<ul class="characteristic">
  <li id="kvart">Квартира</li>
  <li id="house">Дом</li>
  <li id="kommerc">Коммерческие помещения</li>
</ul>

<ul id="room" class="characteristic">
  <li class="rooms active">1 комнатная</li>
  <li class="rooms">2 комнатная</li>
  <li class="rooms">3 комнатная</li>
</ul>


  <input id="area" class="characteristic dn" type="text" placeholder="Введите площадь">

<h2>Результат:</h2>
<span id="result"></span>

CSS

.characteristic {
    list-style: none;
    margin-left: 0;
}

.characteristic li {
  display: inline-block;
  border: #F03226 solid 1px;
  padding: 14px 24px;
  color: #606060;
  transition: all 0.2s linear;
}

.characteristic li:hover {
    background-color: #F03226;
    color: white;
    cursor: pointer;
}

.active {
    background-color: #F03226;
    color: white !important;
}

#area {
  border: #F03226 solid 1px;
  padding: 14px 24px;
  color: #606060;
}

#area:active, #area:focus {
  outline: none;
  transition: all 2s linear;
}

.dn {
  display: none;
  transition: all 2s linear;
}

JavaScript

$('#kvart').click(function() {
                   $('#area').addClass('dn');
                   $('#room').removeClass('dn');
        });
        
$('#house').click(function() {
                   $('#room').addClass('dn');
                   $('#area').removeClass('dn');
        });
        
$('#kommerc').click(function() {
                   $('#room').addClass('dn');
                   $('#area').removeClass('dn');
        });

$('#room').on('click', 'li', function(){
		$(this).addClass('active').siblings().removeClass('active');
});