JSFiddle - React, Tailwind, and code Playground

HTML

<form action="#">
    <ul>
        <li>
            <input type="checkbox" id="pref-1" name="pref-1" value="1" />
            <label for="pref-1">Foo</label>
        </li>
        <li>
            <input type="checkbox" id="pref-2" name="pref-2" value="2" />
            <label for="pref-2">Bar</label>
        </li>
        <li>
            <details>
                <summary>
                    <label for="more">More options</label>
                </summary>
                <input type="checkbox" id="more" name="more" class="toggle" />
                <ul class="more">
                    <li>
                        <input type="checkbox" id="pref-3" name="pref-3" value="3" />
                        <label for="pref-3">Baz</label>
                    </li>
                    <li>
                        <input type="checkbox" id="pref-4" name="pref-4" value="3" />
                        <label for="pref-4">Qux</label>
                    </li>
                </ul>
            </details>
        </li>
    </ul>
</form>

CSS

body {
    margin: 0;
    font-family: sans-serif;
    line-height: 1.5em;
}

ul {
    margin: 0;
    padding: 0;
}

ul ul {
    padding-left: 1.5em;
}

li {
    display: block;
}

summary {
    outline: 0;
}

summary > label {
    display: block;
    cursor: pointer;
}

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

details > .more,
.toggle {
    display: none;
}

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