JSFiddle - React, Tailwind, and code Playground

by Jennifer Perrin

HTML

<div class="dropdownbox">
  <input type="checkbox" id="dd">
  <label for="dd">I'm a checkbox dropdown</label>
  <div class="dropdownbox-content">
    <h1>Hello!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, in fuga repellat eius dolorum esse a culpa ut. Porro, nobis veniam amet praesentium animi perspiciatis excepturi sit sunt inventore recusandae.</p>
  </div>
</div>

CSS

.dropdownbox {
  position: relative;
}

.dropdownbox label {
  cursor: pointer;
}

.dropdownbox input[type="checkbox"] {
  display: none;
  position: absolute;
  /* IE FIX */
  display: block\9;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  outline: 0;
}

.dropdownbox input[type="checkbox"]:checked ~ .dropdownbox-content {
  display: block;
}

.dropdownbox .dropdownbox-content {
  display: none;
}