JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box"></div>
<div class="box1" style="top: 50px;"></div>
<div class="box" style="top: 100px;"></div>
<div class="box1" style="top: 150px;"></div>
<div class="box" style="top: 200px;"></div>
<div class="box1" style="top: 250px;"></div>
<div class="box" style="top: 300px;"></div>
<div class="stick"></div>

CSS

div.box {
-webkit-clip-path: polygon(0 48%, 13% 48%, 13% 39%, 67% 39%, 67% 47%, 100% 0, 100% 38%, 67% 84%, 67% 100%, 15% 100%, 15% 85%, 0% 85%);
clip-path: polygon(0 48%, 13% 48%, 13% 39%, 67% 39%, 67% 47%, 100% 0, 100% 38%, 67% 84%, 67% 100%, 15% 100%, 15% 85%, 0% 85%);
background: #bbb;
height: 120px;
width: 30%;
position: absolute;
top: 0;
left: 0;
transition: .3s;
}
div.box1 {
-webkit-clip-path: polygon(0 48%, 13% 48%, 13% 39%, 67% 39%, 67% 47%, 100% 0, 100% 38%, 67% 84%, 67% 100%, 15% 100%, 15% 85%, 0% 85%);
clip-path: polygon(0 48%, 13% 48%, 13% 39%, 67% 39%, 67% 47%, 100% 0, 100% 38%, 67% 84%, 67% 100%, 15% 100%, 15% 85%, 0% 85%);
background: grey;
height: 120px;
width: 30%;
position: absolute;
top: 0;
left: 0;
transition: .3s;
}
div.box:hover {
  background: brown;
}
div.box1:hover {
  background: brown;
}
div.stick {
  width: 1px;
  height: 360px;
  background: black;
  position: absolute;
  left: 20%;
  top: 60px;
}