JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<ul>
  <li>
    <span></span>
    <div></div>
  </li>
  <li>
    <span></span>
    <div></div>
  </li>
  <li>
    <span></span>
    <div></div>
  </li>
  <li>
    <span></span>
    <div></div>
  </li>
  <li>
    <span></span>
    <div></div>
  </li>
</ul>

SCSS

* {box-sizing:border-box;}

ul {max-width:500px; margin:0 auto; display:flex; flex-wrap:wrap; list-style:none;
  & > li {width:percentage(1/3); outline:1px solid red; text-align: center;}
}

span {display: inline-block; padding:20px; background-color:beige;}
div {position:relative; padding:20px; background-color:tomato;}

li:nth-child(1) div {z-index:4; background-color:crimson; margin-right:-200%;}
li:nth-child(2) div {z-index:1; background-color:blue; margin-left:-100%; margin-right:-100%;}
li:nth-child(3) div {z-index:5; background-color:green; margin-left:-200%;}