JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  
  <input type='checkbox' id='show-check-1' class='show-check'>
  <label for='show-check-1' class='show-check-label'></label>
  <div class='pre-hidden'>Блок 1</div>
  <div class='pre-hidden'>Блок 2</div>
</div>

CSS

.show-check {
  display: none;
}

.show-check-label {
  display: inline-box;
  padding: 0.2em;
  border: solid gray;
  border-radius: 0.4em;
}

.show-check ~ .show-check-label:before {
  content: "Показать";
}

.show-check:checked ~ .show-check-label:before {
  content: "Скрыть";
}
.show-check-label {
  cursor: pointer;
}
.show-check ~ .pre-hidden {
  display: none;
  margin: 0.2em;
}
.show-check:checked ~ .pre-hidden {
  display: block;
}