JSFiddle - React, Tailwind, and code Playground

by rudiedirkx

HTML

<div id="outer">
    <div id="inner"></div>
    <p>I am text and I'm just as white as...</p>
    <p>Yeah...</p>
</div>

CSS

body { background: url(http://www.geekpedia.com/gallery/fullsize/apple-green-stripes-wallpaper.jpg) center center; }

#outer {
    height: 150px;
    width: 250px;
    position: absolute;
    left: 40%;
    top: 20%;
    color: white;
    font-size: 26px;
}
#inner {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    background: blue;
    opacity: 0.6;
}
#inner:after {
    content: "";
    background: blue;
    height: 40px;
    width: 40px;
    border-radius: 40px;
    position: absolute;
    top: -15px;
    left: -15px
}