JSFiddle - React, Tailwind, and code Playground

HTML

<section>
  <ul class="horizontalSlider cf">
    <li>
      <article style="background:red">
        test1
      </article>
    </li>
    <li>
      <article style="background:blue">
        test2test2
          <br />
        test2test2
      </article>
    </li>
    <li>
      <article style="background:green">
        test3test3test3
          <br />
        test3test3test3
          <br />
        test3test3test3
      </article>
    </li>
    <li>
      <article style="background:yellow">
        test4test4test4test4
          <br />
        test4test4test4test4
          <br />
        test4test4test4test4
          <br />
        test4test4test4test4
      </article>
    </li>
  </ul><!-- /.horizontalSlider -->
</section>

CSS

img {max-width: 100%;}
section {display: block; max-width: 1000px; padding: 0px; margin: 60px auto; background: #ccc;}

JavaScript

(function($) {

$.fn.horizontalSlider = function(options) {

var defaults = {
  openWidth: 65, // Initial list item width
  delay: 500, // Delay before items open
  easing: 'linear' // Type of easing for animation
};

var options = $.extend(defaults, options);

return this.each(function() {

  // Variables          
  var listItems = $(this).children('li'); // Select children
  var articles = listItems.children('article'); // Select articles  
  var listNum = listItems.size();   // Count list items
  var openWidth = options.openWidth; // Width of open item
  var closedWidth = (100 - openWidth) / (listNum - 1); // Width of closed item

  // Close all but first item
  listItems.css({
    'width': closedWidth + '%', 
    'float': 'left',
    'overflow': 'hidden'
  }).first().addClass('open').css({
    'width': openWidth + '%'
  });

  var articleWidth = listItems.first().width(); // Width of content hidden by item

  // Set width of articles within each item
  $(this).find('article').css({'width': articleWidth});

  listItems.mouseenter(function() {

  // Set variable for current list item
  var currentItem = $(this);

      if ( currentItem.hasClass('open') ) { /* Do nothing */ } 
      else {
        hoverTimeout = setTimeout(function() {

          // Slide closed open list items
          listItems.removeClass('open')
          .animate({
            'width': closedWidth + '%'
          }, { duration: 800, easing: options.easing, queue: false });

          currentItem.addClass('open')
          .animate({
              'width': openWidth + '%'
            }, { duration: 800, 
              queue: true,
              easing: options.easing, 
              complete: function() { /* Callback function */ } 
            });
        }, options.delay);
     }
  });

  listItems.mouseleave(function() {
    if(window.hoverTimeout) {
      clearTimeout(hoverTimeout);
    };
  });       

});
};

})(jQuery);

$('.horizontalSlider').horizontalSlider();