JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<section class="main">
  <ul class="main_slider slider">
    <li class="slider_item" style="background: red">1</li>
    <li class="slider_item" style="background: blue">2</li>
    <li class="slider_item" style="background: yellow">3</li>
    <li class="slider_item" style="background: pink">4</li>
    <li class="slider_item" style="background: green">5</li>
    <li class="slider_item" style="background: grey">6</li>
  </ul>
</section>

SCSS

ul{
  list-style: none;
}
.main{
  min-height: 300px;
  width: 100%;
   &_slider{
      height: 300px;
   }
}
.slider{
  display: flex;
  justify-content: space-between;
  &_item{
    height: 100%;
    width: 25%;
    &.current{
      width: 50%;
    }
  }
}