JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="filters" class="hashtags">
<ul>
<li class="podbor"><input type="checkbox" name="podbor" value="podbor" id="podbor"><label for="podbor">#01</label></li>
<li class="sopr"><input type="checkbox" name="sopr" value="sopr" id="sopr"><label for="sopr">#02</label></li>
<li class="oform"><input type="checkbox" name="oform" value="oform" id="oform"><label for="oform">#03</label></li>
<li class="razrab"><input type="checkbox" name="razrab" value="razrab" id="razrab"><label for="razrab">#04</label></li>
<li class="awards"><input type="checkbox" name="awards" value="awards" id="awards"><label for="awards">#05</label></li>
<li class="rent"><input type="checkbox" name="rent" value="rent" id="rent"><label for="rent">#06</label></li>
<li class="removal"><input type="checkbox" name="removal" value="removal" id="removal"><label for="removal">#07</label></li>
<li class="zaprab"><input type="checkbox" name="zaprab" value="zaprab" id="zaprab"><label for="zaprab">#08</label></li>
<li class="admin"><input type="checkbox" name="admin" value="admin" id="admin"><label for="admin">#09</label></li>
<li class="nier"><input type="checkbox" name="nier" value="nier" id="nier"><label for="nier">#10</label></li>
<li class="bigbro"><input type="checkbox" name="bigbro" value="bigbro" id="bigbro"><label for="bigbro">#11</label></li>
</ul>
</div>
<div class="structure">
<div class="lvl1">
  <div class="obertka podbor"></div>
  <div class="lvl2">
    <div class="obertka sopr"></div>
    <div class="lvl3">
      <div class="obertka oform"></div>
      <div class="lvl4">
         <div class="obertka razrab"></div>
         <div class="obertka awards"></div>
         <div class="obertka rent"></div>
      </div>
    </div>
    <div class="lvl3">
      <div class="obertka removal"></div>
      <div class="lvl4">
         <div class="obertka zaprab"></div>
         <div class="obertka admin"></div>
         <div class="obertka...

CSS

.hashtags li {
    float: left;
    margin: 0 10px 10px 0;
    list-style-type: none;
    border: 1px solid #c2c2c2;
    padding: 5px;
    line-height: 1em;
    font-size: 12px;
    border-radius: 5px;
    display: block !important;
}
.hashtags li input {
    display: inline-block;
    vertical-align: middle;
    margin: 0 -13px 0 0;
    opacity: 0;
}
.hashtags li label {
    display: inline-block;
    vertical-align: middle;
}
.lvl1 {
    width: 100%;
    float: left;
}
.lvl1 > .obertka {
    display: block !important;
    background: green;
}
.lvl1 .obertka {
    border-width: 1px;
    width: calc(100% - 15px);
}
.obertka, .lvl2 .obertka, .lvl3 .obertka {
    border: 1px solid #bbb;
    padding: 5px;
    border-radius: 5px;
    float: left;
    width: calc(100% - 12px);
    margin-bottom: 10px;
}
.lvl2 .obertka {
  background: blue;  
}
.lvl3 .obertka {
  background: red;
}
.lvl4 .obertka {
  background: magenta;
}
.lvl2, .lvl3, .lvl4 {
    padding-left: 60px;
    width: calc(100% - 60px);
    float: left;
}
.obertka, .lvl2 .obertka, .lvl3 .obertka {
    overflow: hidden;
    max-height: 55px;
    transition: .75s linear;
}
.obertka.hide {
    max-height: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
}
.hashtags li.active {
    background: #D5150B;
    border-color: transparent;
}
.hashtags li.active * {
    color: #fff;
}
.act {display: none;}
.active {display: block !important;}
.active .obertka.hide {
  display: block !impportant;
  padding: 5px !important;
  max-height: initial !important;
  background: black !important;
  margin: 0 0 10px;
}

JavaScript

$(document).ready(function() {

	$("#filters :checkbox").click(function() {
       $(".obertka").removeClass('active');
	   $(this).parent().removeClass('active');
		$("#filters :checkbox:checked").each(function() {
           $("." + $(this).val()).addClass('active');
		   $(".obertka" + "." + $(this).val()).parents(':hidden').slideDown('slow'); 
	   });
		var ober = $(".obertka" + "." + $(this).val());
		ober.each(function () {
			if (ober.hasClass('active')) {
    			$(this).parent().find('.obertka:not(.active)').addClass('hide');
    			$(this).parent().addClass('active');
				$(this).parent().parent().addClass('active');
				$(this).parent().parent().parent().find('.lvl3:not(.active)').addClass('act');
  			} else {
    			$(this).parent().find('.obertka:not(.active)').removeClass('hide');
    			$(this).parent().removeClass('active');
				$(this).parent().parent().removeClass('active');
				$(this).parent().parent().parent().find('.lvl3:not(.active)').removeClass('act');
			}
		});
	});
  
});