JSFiddle - React, Tailwind, and code Playground

by Chevex

HTML

<div id="myContainer">
    <div class="opacityFrame">
    </div>
    <div class="textFrame">
        Just place content here like normal.
        <br />
        <br />
        The opacityFrame will grow in height with the textFrame just as if the text were inside it. This keeps the opacity DIV and the text DIV in sync and looks awesome.
    </div>
</div>

CSS

body
{
    background-image: url("http://fc07.deviantart.net/fs41/f/2009/039/5/f/_Golden_Dream_Wallpaper__by_moroka323.jpg");
    background-repeat: no-repeat;
}

#myContainer
{
    position: relative;
    width: 300px;
    padding: 15px;
    color: #fff;
    margin-top: 150px;
    margin-left: 200px;
    font-family: arial;
}

.opacityFrame
{
    background: #000;
    opacity: .25;
    filter:alpha(opacity=35);
    -moz-opacity: .35;
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: 5px;
    -moz-border-radius: 5px;
}

.textFrame
{
    position: relative;
    height: 100%;
    width: 100%;
    z-index: 2;
}