JSFiddle - React, Tailwind, and code Playground

HTML

<div class="st-container">

  <input type="radio" name="radio-set" checked="checked" id="st-control-1" /><a href="#st-panel-1">page1</a>

  <div class="st-scroll">

    <section class="st-panel" id="st-panel-1">
      <h2>FIRST PAGE</h2>
      <div id="clickme" href="#popup">click to show popup</div>
      <div id="popup">POPUP</div>
    </section>
    <script> $("#clickme").leanModal({ top : 200, overlay : 0.4, closeButton: ".modal_close" }); </script>

    <section class="st-panel st-color" id="st-panel-2">
      <h2>SECOND PAGE</h2>
    </section>

  </div>
 
</div>

CSS

#lean_overlay {
        position: fixed;
        z-index:100;
        top: 0px;
        left: 0px;
        height:100%;
        width:100%;
        background: #000;
        display: none;
 }
 
 #popup{
  background-color: white;
  width:100px;
  height:100px;
  display:none;
}

#st-control-1:checked ~ .st-scroll {
	transform: translateY(0%);
}

JavaScript

//Jquery plugin below
// leanModal v1.1 by Ray Stone - http://finelysliced.com.au
// Dual licensed under the MIT and GPL

(function($) {
  $.fn.extend({
    leanModal: function(options) {
      var defaults = {
        top: 100,
        overlay: 0.5,
        closeButton: null
      };
      var overlay = $("<div id='lean_overlay'></div>");
      $("body").append(overlay);
      options = $.extend(defaults, options);
      return this.each(function() {
        var o = options;
        $(this).click(function(e) {
          var modal_id = $(this).attr("href");
          $("#lean_overlay").click(function() {
            close_modal(modal_id)
          });
          $(o.closeButton).click(function() {
            close_modal(modal_id)
          });
          var modal_height = $(modal_id).outerHeight();
          var modal_width = $(modal_id).outerWidth();
          $("#lean_overlay").css({
            "display": "block",
            opacity: 0
          });
          $("#lean_overlay").fadeTo(200, o.overlay);
          $(modal_id).css({
            "display": "block",
            "position": "fixed",
            "opacity": 0,
            "z-index": 11000,
            "left": 50 + "%",
            "margin-left": -(modal_width / 2) + "px",
            "top": o.top + "px"
          });
          $(modal_id).fadeTo(200, 1);
          e.preventDefault()
        })
      });

      function close_modal(modal_id) {
        $("#lean_overlay").fadeOut(200);
        $(modal_id).css({
          "display": "none"
        })
      }
    }
  })
})(jQuery);

//End of the jquery plugin