JSFiddle - React, Tailwind, and code Playground

by Artem Borovikov

HTML

<div class="slider">
  <input type="radio" name="item" id="item1" checked>
  <input type="radio" name="item" id="item2">
  <input type="radio" name="item" id="item3">
  <div class="item">
    <span>1</span>
    <label for="item1" class="left"></label>
    <label for="item2" class="right"></label>
  </div>
  <input type="radio" name="item" id="item4">
  <div class="item">
    <span>2</span>
    <label for="item1" class="left"></label>
    <label for="item3" class="right"></label>
  </div>
  <input type="radio" name="item" id="item5">
  <div class="item">
    <span>3</span>
    <label for="item2" class="left"></label>
    <label for="item4" class="right"></label>
  </div>
  <input type="radio" name="item" id="item6">
  <div class="item">
    <span>4</span>
    <label for="item3" class="left"></label>
    <label for="item5" class="right"></label>
  </div>
  <input type="radio" name="item" id="item7">
  <div class="item">
    <span>5
    <div class="hover">
      hover
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div></span>
    <label for="item4" class="left"></label>
    <label for="item6" class="right"></label>
  </div>
  <input type="radio" name="item" id="item8">
  <div class="item">
    <span>6</span>
    <label for="item5" class="left"></label>
    <label for="item7" class="right"></label>
  </div>
  <div class="item">
    <span>7</span>
    <label for="item6" class="left"></label>
    <label for="item8" class="right"></label>
  </div>
  <div class="item">
    <span>8</span>
    <label for="item7" class="left"></label>
    <label for="item8" class="right"></label>
  </div>
</div>

CSS

.slider{
    overflow: hidden;
  width:100%;
  _height:200px;
  padding-top:30%;
  position:relative;
  
  border:1px solid #bbb;
  box-sizing:border-box;
}
.item{
  position:absolute;
  display:none;
  z-index:0;
  
  background:#fff;
  border:1px solid #555;
  box-sizing:border-box;
}
.item>span{
  top:0;
  bottom:0;
  left:0;
  right:0;
  position:absolute;
  z-index:2;
}
.item>label{
  top:0;
  bottom:0;
  width:0;
  position:absolute;
  z-index:1;
  overflow:hidden;
}
.item>label.left{
  left:-50%;
}
.item>label.left:after{
  content:'';
  display:block;
  position:absolute;
  top:35%;
  left:50%;
  width:30%;
  padding-top:30%;
  border-top:2px solid #bbb;
  border-left:2px solid #bbb;
  transform:rotate(-45deg);
}
.item>label.right{
  right:-50%;
}
.item>label.right:after{
  content:'';
  display:block;
  position:absolute;
  top:35%;
  right:50%;
  width:30%;
  padding-top:30%;
  border-top:2px solid #bbb;
  border-right:2px solid #bbb;
  transform:rotate(45deg);
}

.slider input{
  margin:0;
  padding:0;
  border:0;
  width:0;
  height:0;
}

.slider input:checked+.item{
  top:27%;
  bottom:27%;
  left:5%;
  right:75%;
  display:block;
  z-index:1;
  transition:all 0.5s linear 0s;
}
.slider input:checked+.item+input+.item{
  top:15%;
  bottom:15%;
  left:15%;
  right:55%;
  display:block;
  z-index:2;
  transition:all 0.5s linear 0s;
}
.slider input:checked+.item+input+.item+input+.item{
  top:5%;
  bottom:5%;
  left:30%;
  right:30%;
  display:block;
  z-index:3;
  transition:all 0.5s linear 0s;
}
.slider input:checked+.item+input+.item+input+.item>label{
    width:50%;
    transition:all 0s linear 0.5s;
}
.slider input:checked+.item+input+.item+input+.item+input+.item{
  top:15%;
  bottom:15%;
  left:55%;
  right:15%;
  display:block;
  z-index:2;
  transition:all 0.5s linear 0s;
}
.slider input:checked+.item+input+.item+input+.item+input+.item+input+.item{
  top:27%;
  bottom:27%;
  left:75%;
  right:5%;
  display:block;
  z-index:1;
  transition:all...