JSFiddle - React, Tailwind, and code Playground

HTML

<label class="custom-control-label" for="customSwitch1"><h>TOGGLE</h></label>
<input type="checkbox" class="custom-control-input" id="customSwitch1" checked>
<div class="trigger">
<ul>
      <li><input type="checkbox">first</li>
      <li><input type="checkbox">second</li>
</ul>
</div>

CSS

.trigger {
  display: none;
}
#customSwitch1:checked + .trigger {
  display: block;
}