JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='content'>
  <div class='trim top'>
  
  </div>
  <div class='wall'>
    <div class='images'>
      <div class='image vertical white'>
        <div class='shadow'></div>
      </div>
      <div class='image vertical blue'>
        <div class='shadow'></div>
      </div>
      <div class='image vertical green'>
        <div class='shadow'></div>
      </div>
      <div class='image vertical orange'>
        <div class='shadow'></div>
      </div>
    </div><div class='vertical-mid-hack'></div>
  </div>
  <div class='trim bottom'>
  
  </div>
</div>
<div class='content'>
  <div class='trim top'>
  
  </div>
  <div class='wall dark'>
      <div class='images'>
      <div class='image vertical white'>
        <div class='shadow'></div>
      </div>
      <div class='image vertical blue'>
        <div class='shadow'></div>
      </div>
      <div class='image vertical green'>
        <div class='shadow'></div>
      </div>
      <div class='image vertical orange'>
        <div class='shadow'></div>
      </div>
    </div><div class='vertical-mid-hack'></div>
  </div>
  <div class='trim bottom'>
  
  </div>
</div>

CSS

html, body {
  margin: 0;
  height: 100%;
}
.content {
  height: 100%;
}
.vertical-mid-hack {
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}
.trim {
  background-color: white;
  height: 20px;
}
.trim.top {
  border-bottom: 1px solid #E3E7E8;
}
.trim.bottom {
  border-top: 1px solid #E3E7E8;
}

.wall {
  height: calc(100% - 40px);
  text-align: center;
  background-color: #E1E7EB;
}
.wall.dark {
  background-color: #C4C9CC;
}
.images {
  display: inline-block;
  vertical-align: middle;
}
.image {
  display: inline-block;
  position: relative;
  width: 100px;
  height: 300px;
  margin: 0 2px;
  background-color: gray;
}
.shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.6;
  box-shadow: 0 1px 3px 0;
}
.white {
  background-color: white;
}
.blue {
  background-color: #0089CF;
}
.green {
  background-color: #00A12B;
}
.orange {
  background-color: #E06900;
}