JSFiddle - React, Tailwind, and code Playground

by Владимир Коротенко

HTML

<div class='container'>
  <div class='mt4'>
    <div class='blue'>
      a
      <div class='inliner'>
        inliner
      </div>
    </div>
  </div>
  <div>
    <div class='red'>
      a
      <div class='inliner-r'>
        inliner
      </div>
    </div>
  </div>
  <div class='mt4'>
    <div class='green'>
      a
      <div class='inliner'>
        inliner
      </div>
    </div>
  </div>
  <div>
    <div class='orange'>
      a
      <div class='inliner-r'>
        inliner
      </div>
    </div>
  </div>
</div>

CSS

body{
  background-color: white;
}
.container {
  display: flex;
  width: 90%;
}

.container div {
  margin: auto 40px;
  width: 100%;
}
.mt4{
  padding-top: 4em;
}

.blue,
.red,
.green,
.orange {
  min-height: 200px;
  text-align: center;
}

.blue {
  background-color: blue;
  margin-top: -20px;
  padding-top: 20px;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.orange {
  background-color: orange;
}

.inliner {
  -webkit-box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
  -moz-box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
  box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
  background-color: white;
  position: relative;
  top: 20px;
  left: -60px;
  min-height: 200px;
}
.inliner-r {
  -webkit-box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
  -moz-box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
  box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
  background-color: white;
  position: relative;
  top: 20px;
  left: -10px;
  min-height: 200px;
}