JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<div id="container">

  <div id="slide_containers">

    <div id="home_slide" class="slide">
      <li class="header"><a href="#" class="goToSlide" data-jim="#about_us_slide">About us</a></li>
      <li class="header"><a href="#" class="goToSlide" data-jim="#contact_us_slide">Contact us</a></li>
      <li id="back"><a href="#" class="goToSlide" data-jim="#home_slide">Home</a></li>
    </div>
      
    <div id="about_us_slide" class="slide">
      <li class="header"><a href="#about_us_slide" class="goToSlide" data-jim="#about_us_slide">About us</a></li>
      <li class="header"><a href="#" class="goToSlide" data-jim="#contact_us_slide">Contact us</a></li>
      <li id="back"><a href="#" class="goToSlide" data-jim="#home_slide">Home</a></li>
    </div>

    <div id="contact_us_slide" class="slide">
      <li class="header"><a href="#about_us_slide" class="goToSlide" data-jim="#about_us_slide">About us</a></li>
      <li class="header"><a href="#" class="goToSlide" data-jim="#contact_us_slide">Contact us</a></li>
      <li id="back"><a href="#" class="goToSlide" data-jim="#home_slide">Home</a></li>
    </div>

  </div>
    
    <div class="nav" style="position:absolute; bottom:0; z-index:1000;"><a id="prev2" href="#">Prev</a> <a id="next2" href="#">Next</a></div>
</div>

CSS

#container {
    width: 320px;
    height: 417px;
    
}
#nav li {
    float: left;
}
#nav li a {
    display: block;
    border: 1px solid #333;
    background: #eee;
}
#slide_containers {
    clear: both;
    border: 1px solid #333;
    background: #eee;
}
.slide {
    width: 100%;
}
#about_us_slide {
    background: #cea;
    width: 320px;
    height: 417px;
}
#contact_us_slide {
    background: #fea;
    width: 320px;
    height: 417px;
}

JavaScript

$(function() {
    $('#slide_containers').cycle({
        fx: 'scrollLeft',
        speed: 'fast',
        timeout: 0,
       
    next:   '#next2', 
    prev:   '#prev2' 
    });

    // Bind click event to all elements with the class goToSlide
    $('.goToSlide').click(function(e) {
        e.preventDefault();
        // Get the data-slide attribute value
        var selector = $(this).data('jim');
        // Get the index of the slide element
        var slideIndex = $(selector).index();
        $('#slide_containers').cycle(slideIndex);
        // wait for animation to complete
        var promise = $('.slide').promise();
        promise.done(function() {
            // set hash
            window.location.hash = selector;
        });
    });

    //Grab hash off URL (default to first tab) and update
    $(window).bind("hashchange", function(e) {
        var anchor = $(location.hash);
        if (anchor.length === 0) {
            $('#slide_containers').cycle(0);
        }
        var slideIndex = $(anchor).index();
        $('#slide_containers').cycle(slideIndex);
    });
});