JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <label>
            <input type="checkbox" />
            Foo
        </label>
    </li>
    <li>
        <label>
            <input type="checkbox" />
            Bar
        </label>
    </li>
    <li>
        <details>
            <summary>Show more</summary>
            <input type="checkbox" class="toggle" />
            <ul>
                <li>
                    <label>
                        <input type="checkbox" />
                        One
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox" />
                        Two
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox" />
                        Three
                    </label>
                </li>
            </ul>
        </details>
    </li>
</ul>

CSS

body {
    margin: 1.5em 5%;
}

details,
summary {
    display: block;
}

ul {
    margin: 0;
    padding: 0;
}

ul ul {
    margin-left: 1.5em;
}

ul > li {
    display: block;
}

summary {
    cursor: pointer;
    outline: 0;
}

summary::-webkit-details-marker {
    display: none;
}

details[open] > .toggle {
    display: none;
}

details > ul {
    display: none;
}

details[open] > ul,
.toggle:checked + ul {
    display: block;
}