JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ctn">

  <div class="p btn left"><a href="#" id="prev">&#60;</a></div>
  <div id="wrapper">
    <ul class="slides">
      <li class="active"></li>
      <li class="large"></li>
      <li class="medium"></li>
      <li class="small"></li>
      <li class="large"></li>
      <li class="medium"></li>
      <li class="small"></li>
      <li class="large"></li>
      <li class="small"></li>
      <li class="medium"></li>
      <li class="small"></li>
      <li class="medium"></li>
      <li class="small"></li>
      <li class="large"></li>
      <li class="small"></li>
      <li class="medium"></li>
      <li class="small"></li>
    </ul>
  </div>
  <div class="n btn right"><a href="#" id="next">&#62;</a>

</div>

CSS

html{height:100%;}
body {background:#000;height:100%;min-height:100%;}
li{list-style-type:none;}
a{color:#fff;text-decoration:none;font-size:40px;font-weight:bold;}
#ctn{width:100%;height:100%}
#ctn .btn{width:5%;display:block;text-align:center;}
#wrapper{width:90%;overflow:hidden;overflow-x:scroll;height:100%;min-height:100%;float:left}
#wrapper .slides{width:1300px;height:100%;}
#wrapper .slides li{width:60px;margin-left:5px;float:left;cursor:pointer;

background: #dedede;
opacity: .8;
}


#wrapper .slides li:first-child{margin-left:0;}
#wrapper .slides li.active{height:95%;width:260px;}
#wrapper .slides li.large{height:90%;}
#wrapper .slides li.medium{height:85%;}
#wrapper .slides li.small{height:80%;}








/* Tools
--------------------------------------------------------------------------------------------------  */
.last{margin-right:0;}.hidden{display:none;visibility:hidden;}.left{float:left;}.right{float:right;}.ir{display:block;text-indent:-999em;overflow:hidden;background-repeat:no-repeat;text-align:left;direction:ltr;}.clearfix:before,.clearfix:after{content:"\0020";display:block;height:0;overflow:hidden;}.clearfix{zoom:1;}.clear,.clearfix:after{clear:both;}

JavaScript

(function(){
    
    
    var gep = {
        
        els: {
            ctn: $('#ctn'),
            prev: $('#prev'),
            next: $('#next'),
            wrapper: $('#wrapper'),
            slides: $('#wrapper .slides') 
        },

        init: function(){
            
            var _this = this,
                slides_li = _this.els.slides.children(),
                large = 260,
                small = 60;
            
            // Hover
            slides_li.on('mouseover', function(){
                $(this).stop(true, true).animate({ opacity: 1 }, 300);
            }).on('mouseout', function(){
                $(this).stop(true, true).animate({ opacity: .8 }, 300)
            });
            
            // Click handlers
            slides_li.on('click', function(){
                gep.toggle_slides(this, small, large);
            });                 
        },
        toggle_slides: function(el, small, large){
               $('.active', this.els.slides).not(el).animate({
                    width: small
                }, 300).removeClass('active');
                // animate the clicked one
                
                if ( !$(el).hasClass('active') ){
                    $(el).animate({
                        width: large
                    }, 300).addClass('active');
                }                
        }
        
    }  
        
    gep.init();    
    
    
})();