JSFiddle - React, Tailwind, and code Playground

HTML

<form class="form-horizontal" id = "form" method="POST" action="">
    <div class="form-group">
        <label for="direction" class="col-xs-3 control-label">Направления:</label>
        <div class="col-xs-9">
            <ul class="ul-treefree ul-dropfree">
                <li>
                    <div class='drop'></div><label><input type='checkbox'/>Кормовая часть</label>
                    <ul>
                        <li>
                            <div class='drop'></div><label><input type='checkbox'/>Комбикорм, БМВК</label>
                            <ul>
                                <li>
                                    <div class='drop'></div><label><input type='checkbox'/>Молочные продукты</label>
                                    <ul>
                                        <li>
                                            <label><input type='checkbox' name='classes[]' value='17'/>ЗЦМ</label>
                                        </li>
                                        <li>
                                            <label><input type='checkbox' name='classes[]' value='18'/>ЗОМ</label>
                                        </li>
                                        <li>
                                            <label><input type='checkbox' name='classes[]' value='19'/>Молочная сыворотка</label>
                                        </li>
                                        <li>
                                            <label><input type='checkbox' name='classes[]' value='20'/>БЖК</label>
                                        </li>
                                        <li>
                                            <div class='drop'></div><label><input type='checkbox'/>Сухое молоко</label>
                                            <ul>
                                                <li>
                                                    <label><input type='checkbox' name='classes[]' value='22'/>Сухое...

CSS

.list-select ul { display: none;}
.list-select li:hover > ul { display: block;}
ul.ul-treefree { padding-left:25px;}
ul.ul-treefree ul { margin:0; padding-left:6px; }
ul.ul-treefree li { position:relative; list-style:none outside none; border-left:solid 1px #999; margin:0; padding:0 0 0 19px; line-height:23px; }
ul.ul-treefree li span {font-size: 20px; cursor:pointer; margin-left: 5px; }
ul.ul-treefree li:before { content:''; display:block; border-bottom:solid 1px #999; position:absolute; width:18px; height:11px; left:0; top:0; }
ul.ul-treefree li:last-child { border-left:0 none; }
ul.ul-treefree li:last-child:before { border-left:solid 1px #999; }
ul.ul-dropfree div.drop {
  width:11px;
  height:11px;
  position:absolute;
  z-index:10;
  top:6px;
  left:-6px;
  background-image:   url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAALCAIAAAD0nuopAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpinDlzJgNlgAWI09LScEnPmjWLoAImrHpIAkwMFAMqGMGC6X44GzkIsHoQooAFTTVQKdbAwxOigyMsmIh3MC7ASHnqBAgwAD4CGeOiDhXRAAAAAElFTkSuQmCC');
  background-position:-11px 0;
  background-repeat:no-repeat;
  cursor:pointer;
}
    
.shine {
    -moz-text-shadow:0 0 10px #c00; 
    -webkit-text-shadow:0 0 10px #c00; 
    text-shadow:0 0 10px #c00;
}

JavaScript

$(document).ready(function() {
    $(".ul-dropfree div.drop").click(function() {
        $(this).nextAll("ul").slideToggle(400);
        if ($(this).nextAll("ul").css('display') == 'none') {
            $(this).css({
                'background-position': "-11px 0"
            });
        } else {
            $(this).css({
                'background-position': "0 0"
            });
        }
    });

    $(".ul-dropfree").find("ul").slideUp(400).
    parents("li").children("div.drop").css({
        'background-position': "0 0"
    });

    $('[type="checkbox"]').change(function() {
        $(this).closest('li').find('[type="checkbox"]').prop('checked', this.checked);
    });
});