JSFiddle - React, Tailwind, and code Playground

HTML

<div id="community">
  <div id = "community_outer"></div>
  <div id = "community_cover"></div>
  <iframe scrolling="no" id="community_frame" src="https://docs.google.com/document/d/1n9bsHIBk1KxGQTKgUF-NG6FRhb4LP0OHfmd4I50CFCU/pub" ></iframe>
</div>

CSS

#community_frame{
  border:  0;
  position:  relative;
  padding:  20px;
}
 #community_outer{
  position: absolute;
  padding: 20px;
  background: #ffffff;
  opacity: .5;
  width: 900px;
  height: 8000px;
  box-shadow:   0px 1px 3px rgba(25, 25, 25, 0.4);
  border-radius:  4px;
 }
#community_cover{
  position: absolute;
  top: 21px;
  left:20px;
  width: 900px;
  height: 40px;
  background: #ffffff;
  z-index: 1000;
  opacity: .5;
}