JSFiddle - React, Tailwind, and code Playground

HTML

<article>
    <input type="checkbox" id="foo" />
    <label for="foo">
        <h1>Section 1</h1>
    </label>
    <section>Content for Section 1</section>
</article>
<article>
    <input type="checkbox" id="bar" />
    <label for="bar">
        <h1>Section 2</h1>
    </label>
    <section> Content for Section 2 Content for Section 2Content for Section 2Content for Section 2Content for Section 2Content for Section 2Content for Section 2Content for Section 2Content for Section 2Content for Section 2Content for Section 2Content for Section 2Content for Section 2Content for Section 2Content for Section 2Content for Section 2Content for Section 2Content for Section 2Content for Section 2Content for Section 2</section>
</article>
<article>
    <input type="checkbox" id="baz" />
    <label for="baz">
        <h1>Section 3</h1>
    </label>
    <section>Content for Section 3</section>
</article>

CSS

section, input {
    display: none;
}
input:checked ~ section {
    display: block;
}

/* beautify */
label {
  display: block;
  text-align: center;
  border: 1px solid black;
  background: #ccc;
  cursor: pointer;
  border-top: 0;
}
article:first-child label {
  border-top: 1px solid black;
}
h1 {
  margin: 0;
}
section {
  border: 1px solid black;
  padding: 5px;
    border-top: 0;
}