JSFiddle - React, Tailwind, and code Playground

by tuanderful

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</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;
}