JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://flesler-plugins.googlecode.com/files/jquery.serialScroll-1.2.2-min.js"></script>
<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2.js"></script>
    <div id="screen">
        <img class="prev" src="img/prev.gif" alt="prev" width="42" height="53" />
        <div id="navigation">
            <ul>
                <li><a href="#">Section 1</a></li>
                <li><a href="#">Section 3</a></li>
                <li><a href="#">Section 5</a></li>
            </ul>
        </div>
        <div id="sections">
            <ul>
                <li>
                    <h2>Section 1</h2>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et turpis sed metus fermentum pellentesque. Vestibulum auctor neque ac nunc elementum malesuada. Praesent non est sed libero vestibulum consectetuer. Sed vehicula. Vivamus quis tellus sit amet erat ultrices luctus. Fusce a ligula. Fusce viverra libero vitae velit. Aenean bibendum nibh non lorem. Suspendisse quis velit. Integer sit amet lacus. Curabitur tristique. Morbi eu lectus. Vestibulum tristique aliquam quam. Sed neque.</p>
                    <p>Nulla facilisi. Quisque eleifend libero. Sed eros. Morbi vel leo. Morbi varius tincidunt sem. Nam sodales volutpat velit. Suspendisse potenti. Duis vehicula pede non nisi. Proin elit pede, ultrices non, ultrices quis, vulputate sit amet, magna. Praesent sodales pellentesque justo. Donec blandit, augue id convallis congue, magna libero hendrerit erat, id blandit est lorem a tellus. Vestibulum tincidunt lectus quis metus. Pellentesque placerat lacus in urna.</p>
                </li>
                <li>
                    <h2>Section 2</h2>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et turpis sed metus fermentum pellentesque. Vestibulum auctor neque ac nunc elementum malesuada. Praesent non est sed libero vestibulum consectetuer. Sed vehicula. Vivamus...

CSS

body {
    background-color: #DDDDDD;
    font-family: Verdana,sans-serif;
    padding-bottom: 0;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 0;
}
ul, li, h4, h3, h2, h1, p {
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}
.next, .prev {
    cursor: pointer;
}
#screen {
    height: 425px;
    margin-top: 40px;
    position: relative;
    width: 725px;
}
#screen .next, #screen .prev {
    position: absolute;
    top: 200px;
}
#screen .prev {
    left: 10px;
}
#screen .next {
    right: 10px;
}
#navigation {
    margin-left: 62px;
    text-align: center;
    width: 600px;
}
#navigation ul {
    margin-left: 55px !important;
}
#navigation li {
    background-color: #EEEEEE;
    float: left;
    margin-bottom: 0;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
}
#navigation a {
    color: #993333;
    font-weight: bolder;
    text-decoration: none;
}
#sections {
    background-color: white;
    clear: left;
    height: 369px;
    margin-left: 62px;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 600px;
}
#sections ul {
    width: 3660px;
}
#sections li {
    float: left;
    padding-bottom: 11px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 11px;
}
#sections li.fallen {
    margin-top: 369px;
}
#sections p {
    font-size: 85%;
    line-height: 1.4em;
    margin-bottom: 16px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 16px;
    width: 550px;
}
#sections h2 {
    color: #993333;
    margin-bottom: 20px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 20px;
}
#sections a {
    color: #777777;
    font-weight: bolder;
    text-decoration: none;
}

JavaScript

// Easing equation, borrowed from jQuery easing plugin
// http://gsgd.co.uk/sandbox/jquery/easing/
jQuery.easing.easeOutQuart = function (x, t, b, c, d) {
    return -c * ((t=t/d-1)*t*t*t - 1) + b;
};

$('#screen').serialScroll({
        target:'#sections',
        items:'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )
        prev:'img.prev',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
        next:'img.next',// Selector to the 'next' button (absolute too)
        axis:'xy',// The default is 'y' scroll on both ways
        navigation:'#navigation li a',
        duration:700,// Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
        force:true, // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
        
      
        onBefore:function( e, elem, $pane, $items, pos ){
            /**
             * 'this' is the triggered element 
             * e is the event object
             * elem is the element we'll be scrolling to
             * $pane is the element being scrolled
             * $items is the items collection at this moment
             * pos is the position of elem in the collection
             * if it returns false, the event will be ignored
             */
             //those arguments with a $ are jqueryfied, elem isn't.
            e.preventDefault();
            if( this.blur )
                this.blur();
        },
        onAfter:function( elem ){
            //'this' is the element being scrolled ($pane) not jqueryfied
        }
    });
    
    /**
     * No need to have only one element in view, you can use it for slideshows or similar.
     * In this case, clicking the images, scrolls to them.
     * No target in this case, so the selectors are absolute.
     */
    
    $('#slideshow').serialScroll({
        items:'li',
        prev:'#screen2 a.prev',
       ...