JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="root">
    <li class="folder">
        <input type="checkbox" id="/folder">
        <label for="/folder">folder</label>
        <ul>
            <li class="file">File1</li>
            <li class="folder">
                <input type="checkbox" id="/folder/subfolder">
                <label for="/folder/subfolder">subfolder</label>
            </li>
        </ul>
    </li>
    <li class="folder">
        <input type="checkbox" id="/folder2">
        <label for="/folder2">folder</label>
        <ul>
            <li class="file">File2</li>
            <li class="folder">
                <input type="checkbox" id="/folder2/subfolder">
                <label for="/folder2/subfolder">subfolder</label>
            </li>
        </ul>
    </li>
    <li class="file">File3</li>
</ul>

CSS

ul.root {
    line-height:16px;
}
ul:not(.root) {
    padding-top:16px;
    padding-left:19px;
    margin-top:-16px;
    margin-left:-19px;
    background:url(http://www.felix-riesterer.de/self/explorer-test/explorer/images/plusbottom.gif) no-repeat;
    height:0;
    overflow:hidden;
}
:checked ~ ul {
    background-image:url(http://www.felix-riesterer.de/self/explorer-test/explorer/images/minusbottom.gif);
    height:auto;
}
li {
    padding-left:19px;
}
input {
    display:none;
}
.folder label::before {
    content:url(http://www.felix-riesterer.de/self/explorer-test/explorer/images/folder.gif);
}
.folder :checked ~ label::before {
    content:url(http://www.felix-riesterer.de/self/explorer-test/explorer/images/folderopen.gif);
}
.file::before {
    content:url(http://www.felix-riesterer.de/self/explorer-test/explorer/images/default.gif);
    padding-right:4px;
    padding-left:2px;
}