JSFiddle - React, Tailwind, and code Playground

by NinjaSk8ter

HTML

<script src="http://entvibes.com/web/js/jquery.scrollTo-min.js"></script>
<script src="http://entvibes.com/web/js/jquery.serialScroll-min.js"></script>
<div id="mid-featureleft-client" >
    <div class="SerialScrollTabs">
        <ul class="navigations">
            <li>
                <a id="btnOptions" href="#" tabindex="1" class='blue'>Options
                </a>
            </li>
            <li>
                <a id="btnAvatar" href="#" tabindex="2" class='blue'>Avatar
                </a>
            </li>    
            <li>
                <a id="btnAbout" href="#" tabindex="3" class='blue'>Tourism
                </a>
            </li>   
            <li>
                <a id="btnAbout" href="#" tabindex="3" class='blue'>Specialties
                </a>
            </li>                
        </ul>        
    </div>
    <div class="SerialScrollContent">
        <div class="sectionss">
            <ul>
                <li>
                    <h2>Startup Guide 1 Content Header</h2>
                    <p>Startup Guide 1 Content</p>
                </li>
                <li>
                    <h2>Startup Guide 2 Content Header</h2>
                    <p>Startup Guide 2 Content 1</p>
                    <p>Startup Guide 2 Content 2</p>
                </li>
                <li>
                    <h2>Startup Guide 3 Content Header</h2>
                    <p>Startup Guide 3 Content 1</p>
                    <p>Startup Guide 3 Content 2</p>
                </li>                
                <li>
                    <h2>Startup Guide 4 Content Header</h2>
                    <p>Startup Guide 4 Content 1</p>
                    <p>Startup Guide 4 Content 2</p>
                </li>
            </ul>
        </div>        
    </div>
</div>

CSS

body {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 0.75em;
    line-height: 1.4em;
    vertical-align: top;
}
#mid-featureleft-client .SerialScrollTabs {
    float: left;
    margin: 0 0 0 0;
    /*padding:3px 0 0 6px;*/
    position:relative; 
    width: 546px;
    border-top: 1px solid #A0AFC3;
    border-left: 1px solid #A0AFC3;  
    border-right: 1px solid #A0AFC3;
    background-color:#F2F4F6;
    border-bottom: 1px solid #A0AFC3; 
}
#mid-featureleft-client ul li a:visited, ul li a:link {   
    text-decoration: none; 
    color: #2B3F63;
}
#mid-featureleft-client ul li a:hover{
    color: #2B3F63;
    text-decoration: underline;
}
#mid-featureleft-client .navigations{
    -moz-background-clip: border;
    -moz-background-origin: padding;
    -moz-background-size: auto auto;
    float: none;
    font-weight: bold;
    margin:0 0 0 20px;
    padding:5px 0 0 0;
    position: relative;
    width: 546px;
}
#mid-featureleft-client .navigations li{
    float: left;
    margin:0 12px -1px 0;
    position: relative;
}
#mid-featureleft-client .navigations a{
    -moz-background-clip: border;
    -moz-background-origin: padding;
    -moz-background-size: auto auto;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    width:117px;
    display: block;
    text-align: center;
    float: left;
    padding:10px 0 9px 0;
}
#mid-featureleft-client .navigations a:focus {  
    outline: none;  
} 
.blue {   
    background-color: #D7DFEA;     
    border-top: none;     
    border-left: none;     
    border-right: none;     
} 
.white {   
    border-top: 1px solid #A0AFC3;     
    border-left: 1px solid #A0AFC3;    
    border-right: 1px solid #A0AFC3;    
    background-color: white;    
} 
#mid-featureleft-client .SerialScrollContent {
    float: left;
    margin: 0 0 0 0;
    padding: 2px 1px 2px 1px;
    position: relative; 
    width: 544px;
    border-left: 1px solid #A0AFC3;    
    border-right: 1px solid #A0AFC3; 
   ...

JavaScript

$(function() {     
        $('.navigations a').click(function() {
            $('.navigations a.white').removeClass('white').addClass('blue');
            $(this).addClass('white').removeClass('blue');    
            return false;
    }); 
}); 

jQuery.easing.easeOutQuart = function(x, t, b, c, d) {
    return -c * ((t = t / d - 1) * t * t * t - 1) + b;
};

jQuery(function($) {
    $('#mid-featureleft-client').serialScroll({
        target: '.sectionss',
        items: 'li',
        prev: 'img.prev',
        next: 'img.next',
        axis: 'xy',
        // The default is 'y' scroll on both ways
        navigation: '.navigations li a',
        duration: 300,
        force: true,
        onBefore: function(e, elem, $pane, $items, pos) {
             e.preventDefault();
            if (this.blur) this.blur();
        },
        onAfter: function(elem) {
        }
    });
});