JSFiddle - React, Tailwind, and code Playground

by Glen Cheney

HTML

<nav>
    <div class="nav-inside">
        <div id="arrows">
            <div class="arrow-left"></div>
            <div class="arrow-right"></div>
        </div>
        <ul>
            <li data-class="tv"><a href="#">TV</a></li>
            <li data-class="email" class="active"><a href="#">Email</a></li>
            <li data-class="docs"><a href="#">Document</a></li>
            <li data-class="labs"><a href="#">Labs</a></li>
        </ul>
    </div>
</nav>

CSS

nav {
    
}

.nav-inside {
    display: inline-block;
    position: relative;
}

#arrows {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: #0AAAC8;
    

  -webkit-transition: all 0.2s ease-out; 
     -moz-transition: all 0.2s ease-out; 
      -ms-transition: all 0.2s ease-out; 
       -o-transition: all 0.2s ease-out; 
          transition: all 0.2s ease-out;
}

#arrows.tv { top: 0px; }
#arrows.email { top: 40px; }
#arrows.docs { top: 80px; }
#arrows.labs { top: 120px; }

nav li {
    margin-bottom: 20px;
}

JavaScript

/* Navigation Slider */
var $arrows = $('#arrows'),
    currentPage = $('nav li.active').attr('data-class');

// Highlight the current page.
$arrows.addClass(currentPage);

$('nav li a').on('click', function(evt) {
    var $this = $(this),
        klass = $this.parent().attr('data-class');
    evt.preventDefault();
    $arrows.removeClass().addClass(klass);
});

/*
$('nav li').hover(function() {
    var $this = $(this)
      , klass = $this.attr('data-class')
      , classes = ['tv', 'email', 'docs', 'labs']
      , index = classes.indexOf(klass);
    
    // Remove the current class from the array
    classes.splice(index, 1);
    
    // Join the array with spaces to use as classes
    classes = classes.join(' ');
    
    // Remove all classes but the current one, add the current one
    $arrows.removeClass(classes).addClass(klass);
}, function() {
    var $this = $(this)
      , klass = $this.attr('data-class');
    $arrows.removeClass().addClass(currentPage);
});
*/