JSFiddle - React, Tailwind, and code Playground

HTML

<div class="filter-panel">
    <div class="filter-tree">
        <div class="filter-category">
            <div class="filter-row-container">
                <div class="filter-row">
                    <div class="tree-button-guide"></div>
                    <div class="tree-button">-</div>
                    <div class="filter-name selected">Karpaty</div>
                </div>
            </div>
            <div class="filter-branch">
                <div class="filter-category">
                    <div class="filter-row-container">
                        <div class="filter-row">
                            <div class="tree-button-guide"></div>
                            <div class="tree-button">-</div>
                            <div class="filter-name selected">Karpaty Zachodnie</div>
                        </div>
                    </div>
                    <div class="filter-branch">
                        <div class="filter-category">
                            <div class="filter-row-container">
                                <div class="filter-row">
                                    <div class="tree-button-guide"></div>
                                    <div class="tree-button">-</div>
                                    <div class="filter-name">Zewnętrzne Karpaty Zachodnie</div>
                                </div>
                            </div>
                            <div class="filter-branch">
                                <div class="filter-category">
                                    <div class="filter-row-container">
                                        <div class="filter-row">
                                            <div class="tree-button-guide"></div>
                                            <!-- react-text: 142 --><!-- /react-text -->
                                            <div class="filter-name selected">Karpaty Austriacko-Morawskie</div>
                                        </div>
            ...

CSS

.filter-name {
    font-size: 0.85em;
    line-height: 1;
    padding: 3px;
    margin: 1px;
    cursor: pointer;
    user-select: none;
    align-self: flex-start;
    width: auto;
}
.filter-name:hover {
    color: royalblue;
}

/* selected filter names - collapsed or open view */
.filter-name.selected {
    background: royalblue;
    border-radius: 4px;
    color: white;
}
.filter-name.selected:hover {
    background: #5179f1;
}

/* blue selected filters buttons - collapsed branch view */
.applied-filters {
    display: flex;
    flex-wrap: wrap;
    margin-left: 10px;
}

/* Displays filter name, plus/minus button and button horizontal tree branch centered in a row */
.filter-row {
    display: flex;
    align-items: center;
}

.filter-branch {
    margin-left: 12px;
    position: relative;
}

/*Tree vertical branches display */
.filter-row,
.filter-category {
    position: relative;
}
.filter-category:not(:last-child)::before {
    z-index: 1;
    content: '';
    position: absolute;
    top: -15px;
    left: 0px;
    bottom: 10px;
    border-left: 1px solid royalblue;
}
.filter-category:last-child .filter-row-container .filter-row::before {
    z-index: 1;
    content: '';
    position: absolute;
    top: -15px;
    left: 0px;
    bottom: 50%;
    border-left: 1px solid royalblue;
}

/* Tree horizontal branches display */
.tree-button-guide {
    line-height: 0.6;
    height: 1px;
    width: 5px;
    margin-right: 2px;
    border-top: 1px solid royalblue;

    flex-shrink: 0;
}

/* Plus / minus tree buttons */
div.tree-button {
    z-index: 3;
    font-size: 0.8em;
    text-align: center;
    line-height: 10px;
    width: 10px;
    height: 10px;
    padding: 2px;
    margin: 2px;
    margin-left: -3px;
    background-color: royalblue;
    border-radius: 2px;
    color: white;
    cursor: pointer;

    flex-shrink: 0;
}



body {
    font-family: sans-serif;
    font-size: 90%;
    background-image:url("../img/bg.jpg");
    background-size: cover;
   ...