JSFiddle - React, Tailwind, and code Playground

by lucaslazaro

HTML

<ul class="container-box">
  <li class="container-box-item">Text</li>
  <li class="container-box-item">Text</li>
  <li class="container-box-item">Text</li>
</ul>

<ul class="container-box">
  <li class="container-box-item">Text</li>
  <li class="container-box-item">Text</li>
  <li class="container-box-item">Text</li>
</ul>

<ul class="container-box">
  <li class="container-box-item">Text</li>
  <li class="container-box-item">Text</li>
  <li class="container-box-item">Text</li>
</ul>

SCSS

ul.container-box {
  width: 100%;
  min-height: 100px;
  position: relative;
}


li.container-box-item {
  background-color: white;
  width: 33%;
  position: absolute;
  height: 100px;
  border: 1px solid;
  transition: all 0.2s ease-in-out;

  &:hover {
    width: 66%;
    z-index: 10;
  }

  &:nth-child(n * 1) {
    left: 0;
    background-color:blue;
  }

  &:nth-child(n + 2) {
    left: 33%;
    background-color:green;
  }

  &:nth-child(n + 3) {
    left: 66%;
    background-color:yellow;
  }
  
  &:nth-child(n + 3):hover {
    left: 33%;
    background-color:yellow;
  }
}