JSFiddle - React, Tailwind, and code Playground

HTML

<label class="accordion">
  <input type="checkbox" /><span class="ac-title">Accordion Title</span>
  <div class="ac-content">
    lorem ipsum is simply dummy text doc sit emit.
  </div>
</label>

CSS

.accordion {
  font-family: sans-serif;
  padding: 20px;
  width: 200px;
  display: block;
}
.ac-title {
  display: block;
  padding: 15px 10px;
  background-color: #ECECEC;
  margin-bottom: 10px;
}

input[type=checkbox] {
  visibility: hidden;
  width: 0px;
  margin: 0px
}

.ac-content {
  overflow: hidden;
  padding: 0 10px
}

input[type=checkbox]:not(:checked) + span + .ac-content {
  max-height: 0px
}