JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <input type="checkbox" name="" id="st_1">
        <label for="st_1">item_1</label>
        <ul>
            <li>item_1</li>
            <li>item_2</li>
            <li>item_3</li>
            <li>item_4</li>
            <li>item_5</li>
        </ul>
    </li>
    <li>
        <input type="checkbox" name="" id="st_2">
        <label for="st_2">item_2</label>
        <ul>
            <li>item_1</li>
            <li>item_2</li>
            <li>item_3</li>
            <li>item_4</li>
            <li>item_5</li>
        </ul>
    </li>
    <li>
        <input type="checkbox" name="" id="st_3">
        <label for="st_3">item_3</label>
        <ul>
            <li>item_1</li>
            <li>item_2</li>
            <li>item_3</li>
            <li>item_4</li>
            <li>item_5</li>
        </ul>
    </li>
</ul>

CSS

input {
    position: absolute;
    opacity: 0;
}

label {
    cursor: pointer;
}

ul ul {
    display: none;
}

input:checked ~ ul {
    display: block;
}