JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id='checkbox'>

<label for="checkbox" tabindex="0" role="button" aria-pressed="false">Save</label>

<ul>
  <li>Lorem ipsum.</li>
  <li>Dolore, molestias?</li>
  <li>Ad, neque.</li>
  <li>Voluptas, libero.</li>
  <li>Totam, mollitia.</li>
</ul>

CSS

input {
  display: block;
  position: relative;
  top: -20px;
  opacity: 0;
  width: 1px;
  height: 1px;
}
input:focus+label {
  outline: 1px solid green;
}
input:checked+label {
  outline: 1px solid red;
}
ul {
  display: none;
}
input:checked+label+ul {
  display: block;
}