JSFiddle - React, Tailwind, and code Playground

by Mukul kant

HTML

<div class="pillar pillar1"></div><div class="pillar pillar2"></div><div class="pillar pillar3"></div>

CSS

* {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  box-sizing: border-box;
}

body {
  padding: 100px;
}

.pillar {
  margin-right: 148px;
  display: inline-block;
  background-image: url(http://www.indonesia.travel/public/media/images/upload/poi/Danau%20Segara%20Anak%20-%20Gallery.jpg);
  height: 350px;
  width: 64px;
  position: relative;
  background-position: 0 -20px;
}

.pillar2 {
  background-position: -192px -20px;
}

.pillar3 {
  background-position: -384px -20px;
}

.pillar:after, .pillar:before {
  position: absolute;
  content: '';
  height: 350px;
  width: 64px;
  top: 16px;
  left: 70px;
  background-image: url(http://www.indonesia.travel/public/media/images/upload/poi/Danau%20Segara%20Anak%20-%20Gallery.jpg);
}

.pillar:before {
  left: 141px;
  top: -10px;
}

.pillar1:after {
  background-position: -64px -40px;
}

.pillar1:before {
  background-position: -128px 0px;
}

.pillar2:after {
  background-position: -256px -40px;
}

.pillar2:before {
  background-position: -320px 0px;
}

.pillar3:after {
  background-position: -448px -40px;
}

.pillar3:before {
  background-position: -512px 0px;
}