JSFiddle - React, Tailwind, and code Playground

by Gregor Adams

HTML

<div id="foo">
    <div id="bar1"></div>
    <div id="bar2"></div>
    <div id="bar3"></div>
    <div id="bar4"></div>

</div>

CSS

body{background:url('http://lorempixel.com/700/500/abstract/2/') no-repeat;}

#foo{
    height:100px;
    width:100px;
    background:rgba(0, 0, 0, 0.6);
    position:absolute;
    left:150px;
    top:150px;
    padding:50px;
    color:rgb(255,255,255);
}

#bar1 {
    position:absolute;
    top:-100px;
    left:-100px;
    padding:50px;
    width: 100px;
    height:100px;
    opacity:1;
    z-index:1;

}
#bar1:after{
    content: '';
    height:200px;
    width:200px;
    background: none;
    opacity: 0.5;
    -webkit-transform: rotate(180deg);
    position:absolute;
    top:0px;
    left:0px;
    border-radius: 200px;
    -webkit-mask-image:-webkit-linear-gradient(transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0)),
        -webkit-linear-gradient(0deg, transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0));
    background-image: -webkit-linear-gradient(transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0)),
        -webkit-linear-gradient(0deg, transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0));
    opacity: 0.6;
    z-index:-1;
}


#bar2 {
    position:absolute;
    top:-100px;
    left:100px;
    padding:50px;
    width: 100px;
    height:100px;
    opacity:1;
    z-index:1;

}
#bar2:after{
    content: '';
    height:200px;
    width:200px;
    background: none;
    opacity: 0.5;
    -webkit-transform: rotate(-90deg);
    position:absolute;
    top:0px;
    left:0px;
    border-radius: 200px;
    -webkit-mask-image:-webkit-linear-gradient(transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0)),
        -webkit-linear-gradient(0deg, transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0));
    background-image: -webkit-linear-gradient(transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0)),
        -webkit-linear-gradient(0deg, transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0));
    opacity: 0.6;
    z-index:-1;
}
#bar3 {
    position:absolute;
    top:100px;
    left:100px;
    padding:50px;
    width: 100px;
    height:100px;
    opacity:1;
    z-index:1;

}
#bar3:after{
    content: '';
   ...