JSFiddle - React, Tailwind, and code Playground

by Gregor Adams

HTML

<div id="foo">
    <div id="bar">Yes we can !!!
    </div>
    can we be semi transparent...?<br/>
    with opaque content...?<br/>
    share a semi-transparent border...?<br/>
    plus a box-shadow...?<br/>
    and still use nice markup?
</div>

CSS

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

#foo{
    height:110px;
    width:250px;
    background:rgba(0, 0, 0, 0.6);
    position:absolute;
    left:150px;
    top:150px;
    padding:20px;
    padding-left:120px;
    border-right: 2px solid rgba(255,255,255,0.5);
    border-bottom: 2px solid rgba(255,255,255,0.5);
    color:rgb(255,255,255);
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);  
}

#foo:before {
    content:'';
    position:absolute;
    top:-100px;
    left:100px;
    width: 288px;
    height:100px;
    border-left: 2px solid rgba(255,255,255,0.5);    
    border-bottom: 2px solid rgba(255,255,255,0.5); 
  box-shadow: 10px -5px 5px -5px rgba(0,0,0,0.5) inset;  

}
#foo:after {
    content:'';
    position:absolute;
    top:100px;
    left:-100px;
    width: 100px;
    height:48px;
    border-right: 2px solid rgba(255,255,255,0.5);    
    border-top: 2px solid rgba(255,255,255,0.5);    
  box-shadow: -5px 10px 5px -5px rgba(0,0,0,0.5) inset;  

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

}




#bar:before{
    content: '';
    height:198px;
    width:198px;
    background: none;
    border-right:2px solid rgb(255,255,255);
    border-bottom:2px solid rgb(255,255,255);
    opacity: 0.5;
    -webkit-transform: rotate(180deg);
    position:absolute;
    top:-25px;
    left:-25px;
    border-bottom-right-radius: 200px;
}

#bar:after {
    content: '';
    height:200px;
    width:200px;
    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;
    -webkit-transform: rotate(180deg);
    position:absolute;
    top:-25px;
    left:-25px;
    border-bottom-right-radius: 200px;
    z-index:-1;

}