JSFiddle - React, Tailwind, and code Playground
HTML
<div class="checkbox-tree">
<div class="parent">
<label><input type="checkbox" name="checkbox_parent_1"> One-click фильтр</label>
<div class="child">
<label><input type="checkbox" name="checkbox_child_1"> Звонки за сегодня</label>
</div>
<div class="child">
<label><input type="checkbox" name="checkbox_child_2"> Входящие</label>
</div>
<div class="child">
<label><input type="checkbox" name="checkbox_child_3"> Исходящие</label>
</div>
<div class="child">
<label><input type="checkbox" name="checkbox_child_4"> Внутренние</label>
</div>
<div class="child">
<label><input type="checkbox" name="checkbox_child_5"> Пропущенные</label>
</div>
</div>
</div>
CSS
.checkbox-tree .parent {
display: inline-block;
}
.checkbox-tree .child {
border-left: 1px solid #aaa;
border-bottom: 1px solid #aaa;
margin-left: 10px;
padding-left: 10px;
}
.checkbox-tree .child:first-of-type {
margin-top: -10px;
}
.checkbox-tree .child label {
display: block;
position: relative;
top: 12px;
background: #fff;
}
.checkbox-tree .child input {
margin-left: 0;
}