JSFiddle - React, Tailwind, and code Playground

by roXon

HTML

<div class="sliderWrap section">
                <div class="topCap">
                    <h1>Genre</h1>
                </div>
                <div class="sliderHolder">

                <!-- left nav -->
                    <div class="navWrap section">
                        <ul class="nav">
                            <li class="all btnSelect">All</li>
                            <li>Action-Adventure</li>
                            <li>Comedy</li>
                            <li>Drama</li>
                            <li>Documentary</li>
                            <li>En Espanol</li>
                            <li>Foreign Films</li>
                            <li>Horror</li>
                            <li>Independant</li>
                            <li>Kids-Family</li>
                            <li>Music</li>
                            <li>Romance</li>
                            <li>SciFi-Fantasy</li>
                            <li>Suspense-Thriller</li>
                        </ul>
                        <!-- end nav wrap -->
                    </div>
                <div class="sliderContent section">
                                        <div class="slideMove">

                                        <!-- First slide  -->
                                    <div class="slide" title="Action-Adventure">
                                        <span class="contentText">
                                            <div class="grid">
<span style="display:block;position:relative;background:#999;color:#fff;width:100%;padding:6px 0 6px 24px;">
    ACTION-ADVENTURE
</span>
                                                          <ul>
                                                            <li>Genre 2</li>
                                                            <li>Title (HD/SD/3D)</li>
                                                            <li>Rating</li>
                                                            <li>Availability...

CSS

.sliderHolder {
    position: relative;
    float: left;
    width: 880px;                                 
    background: url(images/movieListBg.png) repeat-y;
}                            

.navWrap {
    float: left;
    padding: 14px 0 0 0;
  position: absolute;
  text-align: left;
  width: 167px;
  left: 0;
  top:0;
}
/* Grid */
.grid ul,
.grid ul li {
  float: left;
}
.grid ul{
    width: 650px;    
  border-bottom: thin dotted #999999;
  clear: both;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.grid ul li {
    font-size: 11px;
    width: 125px;
}
.loading {
    width: 54px;
    height: 55px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -27px;
}
.attNet {
    margin-top: 760px;
}
img {
    border: none !important;
}
.attNet {
    margin-top: 760px;
}
img {
    border: none !important;
}

ul.nav {
    text-transform: capitalize;
    float: left;
    position: relative;
}
ul.nav li {
    width: 144px;
    color: #000;
    font-weight: bold;
    font-size: 12px;
    padding: 6px 0 6px 23px;
    text-decoration: none;
    cursor: pointer;
    border-top: 1px solid #223c52;
}
ul.nav li:hover {
    color: #fcb314;
}
ul.nav li.btnSelect {
    color: #fcb314;
}
.sliderContent {
   clear: both;
    display: block;
    float: left;
    height: 512px;
    left: 175px;
    margin: 18px 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    width: 690px;
}

.slideMove {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    clear: both;
}
.slide {
    float: left;
    left: 0;
    margin: 1px 0 0 30px;
    position: absolute;
    top: 0;
    width: 665px;
}

JavaScript

$(document).ready(function(){

    $('.slide').css({position:'relative',display:'block'});

    $('ul.nav li').click(function() {
        $(this).addClass('btnSelect').siblings().removeClass('btnSelect');
        
        if( $(this).hasClass('all') ){
            $('.slide:visible').fadeOut(400,function(){
                $('.slide').fadeIn(400);
                $('.grid ul li:nth-child(1)').show();
            });
            return;
        }
        
        var i = $(this).index()-1;    
        $('.slide:visible').fadeOut(400,function(){
            $('.slide:eq('+i+')').fadeIn(400);
            $('.grid ul li:nth-child(1)').hide();
        });
    });

});