JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jqueryfordesigners.com/demo/jquery.localscroll-1.2.5.js"></script>
<script src="http://jqueryfordesigners.com/demo/jquery.scrollTo-1.3.3.js"></script>
<script src="http://jqueryfordesigners.com/demo/jquery.serialScroll-1.2.1.js"></script>
<link rel="stylesheet" href="http://jqueryfordesigners.com/demo/coda-slider.css">
<div id="slider">    
    <div class="scroll">
        <div class="scrollContainer">
            <div class="panel" id="one"><img width="938px" height="275px" src="http://placekitten.com/938/275" /></div>
            <div class="panel" id="two"><img width="938px" height="275px" src="http://placedog.com/938/275"></div>
            <div class="panel" id="three"><img width="938px" height="275px" src="http://placekitten.com/938/275"></div>
            <div class="panel" id="four"><img width="938px" height="275px" src="http://placedog.com/938/275"></div>
        </div>
    </div>
    
    <div id="control" class="navigation"> 
        
        <div class="button"> 
            <div class="buttonInside"> 
                <a class="" href="#one">Make your business more energy efficient</a> 
            </div> 
        </div>
        <div class="button"> 
            <div class="buttonInside"> 
                <a class="" href="#two">Save Time &amp; Money with invoice validation.</a> 
            </div> 
        </div>
        <div class="button"> 
            <div class="buttonInside"> 
                <a class="" href="#three">Do you comply with government legislation?</a> 
            </div> 
        </div>
        <div class="button buttonLast"> 
            <div class="buttonInside"> 
                <a class="" href="#four">Want to speak to an expert?</a> 
            </div> 
        </div>
    </div>
</div>

CSS

/* Your styles */
#control { 
    
    width: 938px; 
    height: 65px; 
    border-right: 1px solid #d1d1d1; 
    border-left: 1px solid #d1d1d1; 
    border-bottom: 1px solid #d1d1d1; 
    background: #fff url(sliderbg.jpg) repeat; 
    
} 
.button { float: left; width: 220px; height: 65px; margin-right: 15px; } 
.buttonInside { padding: 8px; } 
.buttonLast { margin-right: 0; margin-left: 2px; border-right: 0px;}



/* Needed to normalize the stock CodaSlider CSS for you adaptations */
#slider { 
    width: 938px;
}
.scrollContainer div.panel {
    width: 938px;
    height: 275px;
    padding: 0;        
}
.scroll {
    width: 938px;
    height: 275px;
}



/* These create the arrow */
.navigation a.selected {
    position: relative;
}
.navigation a.selected:before {
    content: '';
    
    position: absolute;
    height: 0;
    width: 0;
    top: -18px;
    left: 30px;
    z-index: 1;
    
    border: 10px solid transparent;
    border-bottom: 10px solid red;
    border-top: none;
}

JavaScript

var $panels = $('#slider .scrollContainer > div');
var $container = $('#slider .scrollContainer');

// if false, we'll float all the panels left and fix the width 
// of the container
var horizontal = true;

// float the panels left if we're going horizontal
if (horizontal) {
    $panels.css({
        'float': 'left',
        'position': 'relative' // IE fix to ensure overflow is hidden
    });

    // calculate a new width for the container (so it holds all panels)
    $container.css('width', $panels[0].offsetWidth * $panels.length);
}

// collect the scroll object, at the same time apply the hidden overflow
// to remove the default scrollbars that will appear
var $scroll = $('#slider .scroll').css('overflow', 'hidden');

// apply our left + right buttons
$scroll.before('<img class="scrollButtons left" src="images/scroll_left.png" />').after('<img class="scrollButtons right" src="images/scroll_right.png" />');

// handle nav selection


function selectNav() {
    $(this).parents('.navigation:first').find('a').removeClass('selected').end().addClass('selected');
}

$('#slider .navigation').find('a').click(selectNav);

// go find the navigation link that has this target and select the nav


function trigger(data) {
    var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
    selectNav.call(el);
}

if (window.location.hash) {
    trigger({
        id: window.location.hash.substr(1)
    });
} else {
    $('div.navigation a:first').click();
}

// offset is used to move to *exactly* the right place, since I'm using
// padding on my example, I need to subtract the amount of padding to
// the offset.  Try removing this to get a good idea of the effect
var offset = parseInt((horizontal ? $container.css('paddingTop') : $container.css('paddingLeft')) || 0) * -1;


var scrollOptions = {
    target: $scroll,
    // the element that has the overflow
    // can be a selector which will be relative to the target
    items: $panels,

    navigation:...