JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="toggle_navigation" aria-hidden="true" autocomplete="off">
<label for="toggle_navigation">&#9776;</label>
<div class="navigation">
  <p>Lorem ipsum dolor.</p>
  <p>Sed, dolore vel!</p>
  <p>Deserunt, laboriosam commodi.</p>
  <p>Laboriosam, necessitatibus placeat.</p>
  <p>In, consectetur sequi.</p>
</div>

CSS

* {
  /* Reset */
  margin: 0;
  padding: 0;
  font: 14px sans-serif;
}

[type="checkbox"] {
  display: none;
}

label {
  font-weight: bold;
  cursor: pointer;
}

/* label:before, label:after {
  display: inline-block;
  content: "▼";
  margin: 0 2px;
  transition: transform .5s linear;
} */

[type="checkbox"]:checked ~ label:before {
	transform: rotate(180deg);
}

[type="checkbox"]:checked ~ label:after {
	transform: rotate(-180deg);
}

label,
p {
  display: block;
  border-bottom: 1px solid #333;
  padding: 10px 15px;
  text-align: center;
}

div {
  max-height: 0;
	overflow: hidden;
	transition: max-height .5s ease-in-out;
}

[type="checkbox"]:checked ~ div {
  max-height: 185px;
}

JavaScript

// Bez JSa!