JSFiddle - React, Tailwind, and code Playground

HTML

<div class="overlay">Overlay DIV<iframe frameborder="0"></iframe></div>
        
    <div class="wrapper">
        <embed width="100%" height="100%" src="http://cdn01.foxitsoftware.com/pub/foxit/datasheet/reader/en_us/Datasheet_Reader.pdf" frameborder="0">
        <!--<object width="100%" height="100%" data="http://www.foxitsoftware.com/resources/pdf/Datasheet_Reader.pdf" frameborder="0"></object>-->
        
    </div>

CSS

.overlay {
  background:#FFFFFF;
  border:1px solid #000000;
  padding:30px;
  position:absolute;
  top:20px;
  left:50%;
  width:100px;
  margin-left:-50px;
  z-index:99;
}

.wrapper {
  text-align:center;
  background:#F00;
  padding:20px;
  position:relative;
  z-index:2;
}

iframe {
    position:absolute;
  top:0;
  left:0;
    width: 100%;
    height: 100%;
    z-index: -1;
}