JSFiddle - React, Tailwind, and code Playground

HTML

<label class="toggle" for="chkShow1">Show first element</label>
  <input id="chkShow1" type="checkbox">
  <div>Lorem Ipsum ... however, this is the first content</div>
  
  <label class="toggle" for="chkShow2">Show second element</label>
  <input id="chkShow2" type="checkbox">
  <div>This is the second content ;)</div>

CSS

.toggle{
  font-size: 16px;
  display: block;
  width: 150px;
  border: 1px solid gray;
}
.toggle + input{
  display:none;
}
.toggle + input + *{
  display:none;
  margin-bottom: 4px;
}
.toggle+ input:checked + *{
  display:block;
}