JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div class='square-container'>
  <div class='trigger'>
            <div class="hover panel">
          <div class="front">
            <div class="box1">
              <p>Front</p>
            </div>
          </div>
          <div class="back">
            <div class="box2">
              <p>Back</p>
            </div>
          </div>
        </div>
    
  </div>
  <div class='trigger'>
            <div class="hover panel">
          <div class="front">
            <div class="box1">
              <p>Front</p>
            </div>
          </div>
          <div class="back">
            <div class="box2">
              <p>Back</p>
            </div>
          </div>
        </div>
    
  </div>    
  <div class='trigger'>
            <div class="hover panel">
          <div class="front">
            <div class="box1">
              <p>Front</p>
            </div>
          </div>
          <div class="back">
            <div class="box2">
              <p>Back</p>
            </div>
          </div>
        </div>
    
  </div>
  
</div>

<div class="modal-wrapper">
  <div class="modal">
    <div class="head">
      <a class="btn-close trigger" href="javascript:;"></a>
    </div>
    <div class="content">
    </div>
  </div>
</div>

CSS

.square-container {
  width: 550px;
  margin: 35px auto;
}

.trigger {
    display: inline-block;
    width: 60px;
}

.blur{
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}
.modal-wrapper{
  width:100%;
  height:100%;
  position:fixed;
  top:0; left:0;
  background:rgba(255,257,153,0.75);
  visibility:hidden;
  opacity:0;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.modal-wrapper.open{
  opacity:1;
  visibility:visible;
}

.modal{
  width:600px;
  height:400px;
  display:block;
  margin:50% 0 0 -300px;
  position:relative;
  top:50%; left:50%;
  background:#fff;
  opacity:0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.modal-wrapper.open .modal{
  margin-top:-200px;
  opacity:1;
}

.head{
  width:90%;
  height:32px;
  padding:1.5em 5%;
  overflow:hidden;
  background:#01bce5;
}

.btn-close{
  width:32px;
  height:32px;
  display:block;
  float:right;
}

.btn-close::before, .btn-close::after{
  content:'';
  width:32px;
  height:6px;
  display:block;
  background:#fff;
}

.btn-close::before{
  margin-top:12px;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
}

.btn-close::after{
  margin-top:-6px;
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  transform:rotate(-45deg);
}

.content{
  padding:5%;
}

.panel {
	margin: 0 auto;
	height: 130px;  
-webkit-perspective: 600px;
	-moz-perspective: 600px;
}

.panel .front,
.panel .back {
	text-align: center;

}
	
.panel .front {
	height: inherit;
	position: absolute;
	top: 0;
	z-index: 900;
	text-align: center;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	   -moz-transform:...

JavaScript

$( document ).ready(function() {
  $('.trigger').click(function() {
     $('.modal-wrapper').toggleClass('open');
    $('.square-container').toggleClass('blur');
     return false;
  });
  
  		$('.hover').hover(function(){
			$(this).addClass('flip');
		},function(){
			$(this).removeClass('flip');
		});
});