JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu" id="menu">
 <li>
  <a href="#"></a>
  <div class="sc_menu_wrapper">
   <div class="sc_menu">
    <a href="#"><img title="1" src="http://farm2.static.flickr.com/1434/1464732409_f28c3261c7.jpg" alt=""/></a>
    <a href="#"><img title="2" src="http://farm2.static.flickr.com/1059/1464786371_1c5f2a4c6d.jpg" alt=""/></a>
    <a href="#"><img title="3" src="http://farm2.static.flickr.com/1055/1464889255_fa7801615c.jpg" alt=""/></a>
    <a href="#"><img title="4" src="http://farm2.static.flickr.com/1370/1464993617_f0fe04be17.jpg" alt=""/></a>
    <a href="#"><img title="5" src="http://farm2.static.flickr.com/1383/1465836986_f724e51267.jpg" alt=""/></a>
    <a href="#"><img title="6" src="http://farm2.static.flickr.com/1434/1464732409_f28c3261c7.jpg" alt=""/></a>
    <a href="#"><img title="7" src="http://farm2.static.flickr.com/1059/1464786371_1c5f2a4c6d.jpg" alt=""/></a>
    <a href="#"><img title="8" src="http://farm2.static.flickr.com/1055/1464889255_fa7801615c.jpg" alt=""/></a>
    <a href="#"><img title="9" src="http://farm2.static.flickr.com/1370/1464993617_f0fe04be17.jpg" alt=""/></a>
    <a href="#"><img title="10" src="http://farm2.static.flickr.com/1383/1465836986_f724e51267.jpg" alt=""/></a>
   </div>
  </div>
 </li>
</ul>

CSS

/* Navigation Style */
ul.menu{
 position: fixed;
 top: 0px;
 left:0px;
 width: 100%;
}

ul.menu li{
 position:relative;
 width: 100%
}

ul.menu li > a {
 display: block;
 position:absolute;
 top:300px;
 left:0px;
 width:40px;
 height:200px;
 background-color:#e7e7e8;
}

/* Thumb Scrolling Style */

div.sc_menu_wrapper {
 position: relative;
 height: 220px;
 overflow: hidden;
 top: 300px;
 left: 0px;
 visibility:hidden;
}

div.sc_menu {
 height: 195px;
 visibility:hidden;
 overflow: hidden;
 position: absolute;
 top: 0;
 left: 0;
 display: block;
 top: 0;
 left: 0;
 width: 100%;
}

.sc_menu a {
 background-color:#e7e7e8;
}
.sc_menu img {
 height: 195px;
 width: 130px;
 float: left;
 display: block;
 border: none;
 opacity:0.3;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
}

JavaScript

$(function(){
 // function to make the thumbs menu scrollable
 function buildThumbs($elem) {
  var $wrapper = $elem.next();
  var $menu = $wrapper.find('.sc_menu');
  var leftOffset = $wrapper.offset().left;

  // move the scroll left to the beggining
  $wrapper.scrollLeft(0);
  // make menuWidth (width of all images side by side) include the offset
  var menuWidth = leftOffset;
  // calculate the width of the menu by adding each image width (includes any padding, border & margin)
  $menu.find('img').each(function(){
   $(this).css('left', menuWidth );
   menuWidth += $(this).outerWidth(true);
  });
  // set calculated menu width - if not done, the images will wrap to the next line
  $menu.width(menuWidth);

  //when moving the mouse left or right, the wrapper moves (scrolls) left or right
  $wrapper.bind('mousemove', function(e){
   var wrapperWidth = $wrapper.outerWidth(true);
   var left = ( e.pageX - leftOffset ) * (menuWidth - wrapperWidth) / wrapperWidth;
   $wrapper.scrollLeft(left);
  });
 }

 var stacktime;
 $('#menu li > a').bind('mouseover', function(){
  var $this = $(this);
  // set up thumbnail scrolling
  buildThumbs($this);
  var pos = 0,
      len = $this.next().find('a').length;
  var f = function () {
   if (pos > len) { clearTimeout(stacktime); }
   $this.next().find('a:nth-child(' + pos + ')').css('visibility', 'visible');
   pos++;
  };
  // each thumb will appear with a delay
  stacktime = setInterval(f, 50);
 });

 // on mouseleave, the whole the scrollable area is hidden
 $('#menu li').bind('mouseleave', function(){
  var $this = $(this);
  clearTimeout(stacktime);
  $this.find('.sc_menu').css('visibility', 'hidden').find('a').css('visibility', 'hidden');
  $this.find('.sc_menu_wrapper').css('visibility', 'hidden');
 });

 // when hovering a thumb, change its opacity
 $('.sc_menu a').hover(function(){
  $(this).find('img').stop().animate({ 'opacity': '1.0' }, 400);
 }, function () {
  $(this).find('img').stop().animate({ 'opacity': '0.3'...