JSFiddle - React, Tailwind, and code Playground

by vlit

HTML

<div class="popup" id="popupContainer">
  <div class="popup__flexbox">
    <div class="popup__flex-item" id="popup">
    <div class="popup__close">
       <i class="fa fa-2x fa-times-circle"></i>
    </div>
    <h2></h2>
    <div class='popup__text'></div>
    <div class="popup__videos"></div>
    <div class="popup__images"></div>
  </div>
</div>

CSS

#popupContainer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display:none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: center;
    z-index: 15;
    background-color: red;
}
#popupContainer *{
    border: 1px solid blue;
background-color: white;    
}

.popup {
  display: none;
}

.popup__flexbox {
  display: flex;
}

JavaScript

$("#popupContainer").fadeIn();