JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://use.fontawesome.com/67979be1fd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/custombox/4.0.3/custombox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/custombox/4.0.3/custombox.min.css">
<body>
  <div id="modal">
        <div id="leftNnav">
            <i id="leftNnavImage" class="fa fa-chevron-left" aria-hidden="true"></i>
        </div>

        <div id="modalContent1" class="modalContent activeModalContent">
            <img id="modalContentMedia" src="https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_960_720.jpg"/>
            content text goes here, lots and lots and lots and lots and lots and lots more
        </div>

        <div id="modalContent2" class="modalContent">
            Content2 = YT Video
        </div>

        <div id="modalContent3" class="modalContent">
            Content3 = text
        </div>

        <div id="rightNnav">
            <i id="rightNnavImage" class="fa fa-chevron-right" aria-hidden="true"></i>
        </div>

        <div id="modalFooter">
                <svg height="40" width="40">
                    <circle id="circle1" class="circle activeCircle" cx="20" cy="20" r="10"></circle>
                </svg>
                <svg height="40" width="40">
                    <circle id="circle2" class="circle" cx="20" cy="20" r="10"></circle>
                </svg>
                <svg height="40" width="40">
                    <circle id="circle3" class="circle" cx="20" cy="20" r="10"></circle>
                </svg>
            </div>
    </div>
</body>

CSS

body {
  background: #ddd;
  width: 100vw;
  height: 100vh;
  position: relative;
}

h2 {
  color: #007fed;
  font-weight: bold;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

p {
  color: #001818;
}

#modal {
  display:none; 
  background-color:#ffffff; 
  width:70%; 
  height: 60%;
  position: relative; 
  border-radius: 25px;
}

#modalFooter{
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -65px;
  width: 130px;
}

.circle{
  stroke: #9ec5ae;
  stroke-width: 1px;
  fill: white;
}

.activeCircle{
  fill: #9ec5ae;
}


#leftNnav{
  position: absolute;
  cursor: pointer;
  z-index: 20;
  padding-left: 10px;
  left: 5px;

  top: 50%;
}

#rightNnav{  
  position: absolute;
  cursor: pointer;
  z-index: 20; 
  padding-right: 10px;
  right: 5px;
  top: 50%;

}

.nnav{
  display: none;
}

.activeNnav{
  display: inline;
}

.modalContent{
  display: none;

  position: absolute;
  width: 100%;
  height: 100%;
  margin: 30px;
}

#modalContentMedia{
 width: 300px;
 height: 150px;
}

.activeModalContent{ 
  display: inline;
}

#imageText{
  position: relative;
}

#MapInstructions{
  position: absolute;
  width: 80%;
}

.wrap {
  position: absolute;
  overflow: scroll;
  top: 0%;
  right: 0%;
  bottom: 0px;
  left: 0%;
  padding: 20px 50px;
  display: block;
  border-radius: 4px;
  transform: translateY(0px);
  transition: all 0.5s; 
  visibility: hidden;
  z-index: 99;
}
.wrap .content {
  opacity: 0;
  left: 0px;
  right: 0px;
}
.wrap:before {
  position: absolute;
  width: 1px;
  height: 1px;
  background: white;
  content: "";
  bottom: 10px;
  left: 50%;
  top: 95%;
  color: #fff;
  border-radius: 50%;
  -webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.wrap.active {
  display: block;
  visibility: visible;
  box-shadow: 2px 3px 16px silver;
  transition: all 600ms;
  transform: translateY(0px);
  transition: all 0.5s;
  z-index:...

JavaScript

var modal = new Custombox.modal({
    content: {
        effect: 'blur',
        target: '#modal',
        positionX: 'center',
        positionY: 'center',
        speedIn: 100,
        speedOut: 300,
        delay: 150
    }
});

modal.open();