JSFiddle - React, Tailwind, and code Playground

by Annett

HTML

<div id="TakeOverE">    
<div id="centered">content</div>
<div id="sidebar1">sidebar-left</div>
<div id="sidebar2">sidebar-right</div>
</div>

CSS

#TakeOverE {
    background: url("http://pagead2.googlesyndication.com/pagead/imgad?id=CICAgICQkbCXVBABGAEyCL8GxiymKA-p") no-repeat scroll center top #494949;
    bottom: 0;
    cursor: pointer;
    left: 0;
    margin: 0 auto;
    position: fixed;
    right: 0;
    top: 0;
}

#sidebar1 {
    position: absolute;     
    left: 50%;   
    margin-left: -825px;   
    background: red;   
    width: 55%;   
    height: 100%;     
    opacity: 0.5;
}

#sidebar2 {
    position: absolute;        
    left: 60%;   
    margin-left: 0;    
    width: 100%;   
    background: blue;       
    height: 100%;   
    opacity: 0.5;
}

#centered {
  position: fixed;
  left: 50%;
  margin-left: -475px;
  width:960px;
  height:850px;    
  background: white;
  opacity: 0.8;
  z-index:100;    
 
}