JSFiddle - React, Tailwind, and code Playground

by acodesmith

HTML

<div class="container">
    <div class="left">
        <div class="relWrp">
            <div class="top">
                <div class="relWrp">
                    <span>tagline</span>
                </div> 
            </div>
            <div class="bottom">b</div>            
        </div>       
    </div>
    <div class="right">
        <div class="relWrp">
            <div class="top">
                <div class="relWrp">
                    <span>tagline</span>
                </div>    
            </div>
            <div class="bottom">b</div>    
        </div>
    </div>        
</div>

CSS

.container {
width:100%;
height:500px;
    min-height:100%;
position:relative;    
}
.left, .right {
 width:50%;
height:100%;  
position:absolute;  
padding:0;
margin:0;  
top:0;    
}
.left {
 left:0;      
}
.right {
right:0;     
}
.left .relWrp, .right .relWrp {
position:relative;
width:100%;
height:100%;    
}
.left .bottom, .right .bottom {
    bottom:0;
    height:50%;
    position:absolute;
    text-align:right;
    background:blue;
    width:100%;
}
.right .bottom {
text-align:left;
background:pink;  
-webkit-transition: all 1s ;
-moz-transition: all 1s ;
-ms-transition: all 1s ;
-o-transition: all 1s ;
transition: all 1s ;    
}
.right .bottom:hover {
z-index:90;
left:-10px;
bottom:10px;
padding:5px;   
    -webkit-box-shadow: 0px 0px 5px 0px #999;
-moz-box-shadow: 0px 0px 5px 0px #999;
box-shadow: 0px 0px 5px 0px #999;     
    -webkit-transition: all 1s ;
-moz-transition: all 1s ;
-ms-transition: all 1s ;
-o-transition: all 1s ;
transition: all 1s ;
}
.right .top {
background:orange;
top:0;
height:50%;
width:100%;
position:absolute;   
-webkit-transition: all 1s ;
-moz-transition: all 1s ;
-ms-transition: all 1s ;
-o-transition: all 1s ;
transition: all 1s ;    
}
.right .top:hover {
top:5px;
left:-10px;
padding:5px;
z-index:90;    
        -webkit-box-shadow: 0px 0px 5px 0px #999;
-moz-box-shadow: 0px 0px 5px 0px #999;
box-shadow: 0px 0px 5px 0px #999; 
    -webkit-transition: all 1s ;
-moz-transition: all 1s ;
-ms-transition: all 1s ;
-o-transition: all 1s ;
transition: all 1s ;
}
.top .relWrp span {
 position:absolute;
bottom:0;    
}
.left .relWrp .top, .left .relWrp .bottom {
 position:absolute;
width:100%;
height:50%;    
}
.left .relWrp .top {
 background:green;   
}
.left .relWrp .top .relWrp span {
 text-align:right;
width:100%;    
}
.left .relWrp .bottom {
 bottom:0;
background:yellow; 
-webkit-transition: all 1s ;
-moz-transition: all 1s ;
-ms-transition: all 1s ;
-o-transition: all 1s ;
transition: all 1s ;    
}
.left .relWrp...