JSFiddle - React, Tailwind, and code Playground

by Albert221

HTML

<input type="checkbox" id="toggle_navigation" aria-hidden="true" autocomplete="off">
<label for="toggle_navigation">Rozwiń menu</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,
p {
  display: block;
  border-bottom: 1px solid #333;
  padding: 10px 15px;
  text-align: center;
}

div {
  display: none;
}

[type="checkbox"]:checked ~ div {
  display: block;
}

JavaScript

// Bez JSa!