JSFiddle - React, Tailwind, and code Playground

by aktoriukas

HTML

<body>
  <div class='row'>
    <div class='column'>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class='column'>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class='column'>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class='column'>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class='column'>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  
</body>

CSS

body {
  position:initial;
}
.row{
  display: flex;
  flex-direction: row;
}
.column {
  margin: 10px;
}
.column div {
  margin: 10px -20px;
  position: relative;
  width: 60px;
  height: 60px;
  background-color: grey;
  clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
}
.column:nth-child(odd) div{
  bottom: 30px;
}