JSFiddle - React, Tailwind, and code Playground

by deswolf

HTML

<div id="wrapper">
<div class="centered box shadow1x">
<div class="content">
  <div class="shadow1">
  west side
  </div>
  <div class="shadow1">
  east side
  </div>
</div>
</div>
</div>

CSS

* {margin:0;padding:0;}
html,body {height:100%;background:#5db1fb;color:#444;}
#wrapper {
  margin:0 auto;
  height:90%;
  padding-top:10%;
}

.centered {
  _position:absolute;
  _left:50%;
  _top:50%;
  _transform:translate(-50%, -50%);
  margin:0 auto;
}

.content {display:block;width:100%;height:100%;text-align:center;font-size:0;}
.content > div {font-size:16px;display:inline-block;width:50%;height:100%;vertical-align:middle;background:#fff;}
.content > div:first-child {background:#2196f3;color:#fff;border-radius:15px 0 0 15px;}
.content > div:last-child {border-radius:0 15px 15px 0;height:90%;}

.box {
  width:60%;
  height:50%;
  _background:#ccc;
  position:relative;
}

.shadow1:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius:15px 15px 15px 15px;
}

.shadow1:before {
  box-shadow: 0 4px 2px -3px #444,
              0 10px 73px 5px #444;
}

.shadow2:before {
  content:"";
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:url(https://i.imgur.com/jzm1SuP.png) center center no-repeat;
  background-size:cover;
  opacity:.1;
}