JSFiddle - React, Tailwind, and code Playground

HTML

<div id="solidcolor">
    <div class="transcolor">transcolor
        <div class="notranscolor">some text</div>
    </div>
</div>

CSS

#solidcolor{
    background: url("http://i45.tinypic.com/o5aycp.gif") repeat; 
    width: 200px; 
    height: 200px;
}
.transcolor{
    background: blue; 
    opacity: 0.4; 
    height: 100px;
}
.notranscolor{
    background: red; /* how to remove this transparency */
    opacity: 1; /* I have tried this */
}