JSFiddle - React, Tailwind, and code Playground

HTML

<label>
  <input type="checkbox">
  <span>Заголовок</span>
  <div>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </div>
</label>


<label>
  <input type="checkbox">
  <span>Заголовок</span>
  <div>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </div>
</label>


<label>
  <input type="checkbox">
  <span>Заголовок</span>
  <div>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </div>
</label>


<label>
  <input type="checkbox">
  <span>Заголовок</span>
  <div>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст...

CSS

label {
  display: block;
  margin-bottom: 30px;
  padding: 20px;
  border-radius: 10px;
  max-width: 400px;
  box-shadow: 0 0 10px 0 #ddd;
  cursor: pointer;
}

input {
  display: none;
}

span {
  font-weight: bold;
  position: relative;
}

span:after {
  content: "";
  width: .35em;
  height: .35em;
  display: inline-block;
  border-right: 2px solid;
  border-bottom: 2px solid;
  opacity: .5;
  transform: rotate(45deg);
  margin-left: 7px;
  top: -.2em;
  position: relative;
}

div {
  display: none;
  margin-top: 15px;
}

/* */

input:checked~div {
  display: block;
}

input:checked~span:after {
  transform: rotate(-135deg);
  top: .01em;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;
  margin: 0;
  padding: 30px;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}