JSFiddle - React, Tailwind, and code Playground

HTML

<body>
      
<div class="parent">

    <div class="child_content">
        <h2>Awesome Title</h2>
    </div>
</div>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque animi assumenda explicabo labore quidem odio repudiandae distinctio consequuntur quas libero temporibus delectus rem provident autem magnam recusandae vero aut fugit.</p>
</body>

CSS

body{
    background-image: url('http://res2.windows.microsoft.com/resbox/en/windows%207/main/23d26ebe-b09b-414d-9d6a-635df9003b2d_5.jpg');
    background-repeat: no-repeat;    
    font-family:verdana;
}
.parent{
    position:relative;    
    width: 300px;
    height:30px;   
}

.child_content{
    background: rgba(255,255,255,0.3);
    position:absolute;
    width: 300px;
    height:30px;
    border-radius:3px;
    z-index:2;
}
.child_content h2{
    font:bold 24px/30px Arial, Sans-serif;
    padding:0;
    margin:0;
    color:black;
    text-align: center;
}