JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Introduction" class="outsideBox">
    	<div id="Introduction" class="insideBox">This is the inside box which should not inherit transparancy</div>
    </div>

CSS

body
    {
    background-image:url('http://media-bubble.info/images/layout/background.png');
    }
    
    .outsideBox {
        width:70%;
        height:200px;
        background-color: #ffffff;
        opacity:0.7; 
        filter:alpha(opacity=70);
        text-align:center;
    }
    
    .insideBox {
        width:40%;
        height:80px;
        background-color: #fff;
        z-index:999999;
    }