JSFiddle - React, Tailwind, and code Playground

HTML

<div id="foo">
	<div id="bar">
        <ul>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
	</div>

	<iframe src="http://www.cnn.com" width="200px" height="200px" frameborder="0" style="z-index:-1"></iframe>
</div>

CSS

#bar {
    width:100px; 
    opacity:0.8;
    height: 150px; 
    position:relative; 
    top:100px; 
    z-index:2; 
    background:red
}

#foo {
  /* opacity:0.5; */ 
}