JSFiddle - React, Tailwind, and code Playground

by piiantom

HTML

<a class="open-edit-popup" id="e_a_c">OPEN</a>

<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>

CSS

.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;
}

.tsc_1 {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

JavaScript

$(document).ready(function() {
  $("#e_a_c").click(function(e) {
  	e.stopPropagation();
	  e.preventDefault();
  	if ($("#t_1").hasClass("tsc_1")) {
 			$("#t_1").removeClass("tsc_1");
    } else {
			$("#t_1").addClass("tsc_1");
    }
  });
  $(document).click(function(e) {
    if ($("#t_1").hasClass("tsc_1")) {
      $("#t_1").removeClass("tsc_1");
    }
  });
});