JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
	<div id = "picture">
       <iframe src="http://www.adelaide.edu.au/myuni/tutorials/docdesign/guides/docDesignGuide_KeepPDFsmall.pdf" width="200px" top="100px" height="200px" frameborder="0"></iframe>
    </div> 
    <div id="bar">
        <ul>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
	</div>
  
</div>

CSS

#container {
    position: relative;
 
} 
#picture { 
    position: absolute;
    margin-top: 100px;
    width: 200px;
    height: 200px;
    border: 0;
    }
#bar { 
    width:100px; 
    opacity:0.5;
    height: 150px; 
    position:relative; 
    top:100px;  
    color: rgba(3,3,3,0.5);
    background:rgba(255,0,0,0.5);
    }