JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="aaa" class="box effect-4 effect-duration-3"></a>
<a href="#" id="bbb" class="box effect-4 effect-duration-3"></a>

CSS

.box {
    width:335px;
    height:203px;
    float:left;
    margin:0 15px 15px 0;
    position:relative;
    -webkit-transform: translate3d(0px, 0px, 0px);
    z-index:0;
    background:#ff0000;
}
.popup {
    width:325px;
    height:340px;
    background:#444444;
    z-index:99; 
    position:absolute;
    left:100px;
    display:none;
    -webkit-transform: translate3d(0px, 0px, 0px);
}
.effect-parent {
    -webkit-transform: perspective(1300px);
    -moz-transform: perspective(1300px);
    transform: perspective(1300px);
}
.effect-4 {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: rotateX(-80deg);
    -moz-transform: rotateX(-80deg);
    transform: rotateX(-80deg);
    -webkit-animation: flip ease-in-out forwards;
    -moz-animation: flip ease-in-out forwards;
    animation: flip ease-in-out forwards;
}
@-webkit-keyframes flip {
    100% { -webkit-transform: rotateX(0deg); opacity: 1; }
}

@-moz-keyframes flip {
    100% { -moz-transform: rotateX(0deg); opacity: 1; }
}

@keyframes flip {
    100% { transform: rotateX(0deg); opacity: 1; }
}
.effect-duration-3{
    -webkit-animation-duration: .6s;
    -moz-animation-duration:    .6s;
    animation-duration:         .6s;
}

JavaScript

jQuery(document).ready(function() {
    
    var popupMarkupaaa = '<div class="popup" id="popupaaa"></div>';
    var popupMarkupbbb = '<div class="popup" id="popupbbb"></div>';
    
    $('.box').each(function() {
        var id = $(this).attr('id');
        $(this).append(eval('popupMarkup'+id));
        //$(this).append(popupMarkupaaa);
    });
    
    $(document).on({
        mouseenter: function(){
        var popup= 'popup'+$(this).attr('id');
        $('#'+popup).fadeIn();
    },
    mouseleave: function() {
        var popup= 'popup'+$(this).attr('id');
        $('#'+popup).fadeOut();
    }
    }, '.box');
});