JSFiddle - React, Tailwind, and code Playground

by piiantom

HTML

<label>OPEN<input type="checkbox" class="open-edit-popup" id="e_a_c"/>
  <div id="e_a_p">
  <div class="e-p-cont">
    <div class="e-p-main" id="t_1">
      <div class="e-p-text-1 dps">
        <p>test</p>
        <p>test</p>
        <p>test</p>
      </div>
    </div>
  </div>
</div>
</label>

CSS

#e_a_c{
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
#e_a_c:checked+#e_a_p #t_1{
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}


.e-p-main {
  margin-top: 40px;
  height: auto;
  width: 200px;
  background: #fff;
  border: 1px solid #ddd;
  z-index: 99;
  -webkit-transform-origin: top right;
  -ms-transform-origin: top right;
  transform-origin: top right;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: -webkit-transform .15s ease-out;
  transition: -webkit-transform .15s ease-out;
  -o-transition: transform .15s ease-out;
  transition: transform .15s ease-out;
  transition: transform .15s ease-out, -webkit-transform .15s ease-out;
}