JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" name="titles" id="title1"/>
		<label for="title1">Title1</label>
		<div>
			<p>
				Title 1 text.
			</p>
		</div>
		<input type="checkbox" name="titles" id="title2"/>
		<label for="title2">Title2</label>
		<div>
      <p>
    	  Titre 2 text.
      </p>
		</div>
		<input type="checkbox" name="titles" id="title3"/>
		<label for="title3">Title3</label>
		<div>
      <p>
        Title 3 text.
      </p>
		</div>
		<input type="checkbox" name="titles" id="title4"/>
		<label for="title4">Title4</label>
		<div>
      <p>
        Title 4 text.
      </p>
		</div>

CSS

input {
    display: none;
  }
  label {
      display: block;
      background: lightgrey;
      width: 500px;
      height: 20px;
      margin-bottom: 10px;
  }
  label + div {
    display: none;
  }
  #title1:checked + label + div {
    display: block;
  }
  #title2:checked + label + div {
    display: block;
  }
  #title3:checked + label + div {
    display: block;
  }
  #title4:checked + label + div {
    display: block;
  }