JSFiddle - React, Tailwind, and code Playground

HTML

<span class="show_popup" id="whatever-1">BUTTON 1</span>
<span class="show_popup" id="whatever-2">BUTTON 2</span>
<span class="show_popup" id="whatever-3">BUTTON 3</span>
<span class="show_popup" id="whatever-4">BUTTON 4</span>
<span class="show_popup" id="whatever-5">BUTTON 5</span>
<span class="show_popup" id="whatever-6">BUTTON 6</span>

<div class="popup hide">
  <div class="inner">
    <div class="content">
      <h3>Title</h3> <span class="close_popup">x</span>
      <p>Nějaký random text .... Nějaký random text .... Nějaký random text .... Nějaký random text .... Nějaký random text .... Nějaký random text .... Nějaký random text .... Nějaký random text .... Nějaký random text .... Nějaký random text .... Nějaký random text .... Nějaký random text .... Nějaký random text .... Nějaký random text .... Nějaký random text .... Nějaký random text .... Nějaký random text .... Nějaký random text .... Nějaký random text .... Nějaký random text .... Nějaký random text .... </p>
    </div>
  </div>
</div>

CSS

* { font-family: sans-serif; }

.show_popup {
  position: relative;
  float: left;
  width: 120px;
  height: 44px;
  font-size: 20px;
  line-height: 44px;
  text-align: center;
  background: red;
  color: white;
  margin-right: 20px;
  cursor: pointer;
}

.popup {
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background: rgba(0,0,0,0.7);
  z-index: 999999999999;
} .popup.hide { display: none; }

.inner {
  position: relative;
  width: 300px;
  margin: 0 auto;
}

.content {
  position: relative;
  float: left;
  width: 100%;
  height: auto;
  background: #FFF;
  padding: 30px;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 30px;
}

h3 {
  position: relative;
  float: left;
  width. 100%;
  margin: 0 0 20px 0;
  color: #272727;
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
}

.close_popup {
  position: absolute;
    top: 32px;
    right: 30px;
    height: auto;
    width: auto;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    background: red;
    color: #FFF;
    padding: 4px 6px;
    cursor: pointer;
}

p {
  position: relative;
  float: left;
  width: 100%;
  margin: 0px;
  padding: 0px;
  font-size: 14px;
  color: #888;
  line-height: 20px;
}

JavaScript

jQuery(".show_popup").on("click", function() {
	if( jQuery(".popup").hasClass("hide") ) {
  	jQuery(".popup").removeClass("hide");
  }
});

jQuery(".close_popup").on("click", function() {
	if( !jQuery(".popup").hasClass("hide") ) {
  	jQuery(".popup").addClass("hide");
  }
});