JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jachamboneth.cpsc3430.ausrc.org/au_greglist/scripts/slidetabs/jquery.mousewheel.min.js"></script>
<script src="http://jachamboneth.cpsc3430.ausrc.org/au_greglist/scripts/slidetabs/jquery.slidingtabs.js"></script>
<script src="http://jachamboneth.cpsc3430.ausrc.org/au_greglist/scripts/slidetabs/jquery.easing.1.3.js"></script>
<script src="http://jachamboneth.cpsc3430.ausrc.org/au_greglist/scripts/slidetabs/jquery.cookie.min.js"></script>
<h1>Horizontal demo</h1>                     
            
    <!-- Start HTML - Horizontal tabs -->
    <div id="st_horizontal" class="st_horizontal">                                                
        
        <div class="st_tabs_container">                                                                                                                                          
            
            <a href="#tab_1" class="st_ext prev" rel="st_horizontal" > </a>
            
            <div class="st_slide_container">
            
                <ul class="st_tabs">
                    <li><a href="#st_content_1" rel="tab_1" class="st_tab st_first_tab st_tab_active" >Horizontal Tab #1</a></li>
                    <li><a href="#st_content_2" rel="tab_2" class="st_tab" >Horizontal Tab #2</a></li>                                     
                    <li><a href="#st_content_3" rel="tab_3" class="st_tab" >Horizontal Tab #3</a></li>
                    <li><a href="#st_content_4" rel="tab_4" class="st_tab" >Horizontal Tab #4</a></li>
                    <li><a href="#st_content_5" rel="tab_5" class="st_tab" >Horizontal Tab #5</a></li>                                                       
                    <li><a href="#st_content_6" rel="tab_6" class="st_tab" >Horizontal Tab #6</a></li>
                    <li><a href="#st_content_7" rel="tab_7" class="st_tab" >Horizontal Tab #7</a></li>
                    <li><a href="#st_content_8" rel="tab_8" class="st_tab" >Horizontal Tab #8</a></li>          ...

CSS

/* 
 * Sliding Tabs - jQuery Plugin
 * Copyright 2011, Christian André
 *
 * CHANGING THE WIDTH: To change the width of the tabs layout see line 14.
 *
------------------------------------------------------------------------------------- */
html { overflow:auto; }
        body { font:13px/18px Arial, Helvetica, sans-serif; background-color:#f5f5f5; width:775px; margin:20px auto; }
        body h1 { font-size:18px; margin:0 0 20px; }

div.st_horizontal { /* The main container */    
    position:relative;
    float:left;
    clear:both;
    width:775px; /* Set the full width */    
    color:#616161;
}

/* Control buttons
------------------------------------------------------------------------------------- */
div.st_horizontal a.st_prev,div.st_horizontal a.st_ext.prev, 
div.st_horizontal a.st_next,div.st_horizontal a.st_ext.next { /* Directional buttons (previous/next) */
    position:absolute;
    top:0px;
    z-index:110;
    height:38px;
    width:39px;
    border:1px solid #d4d4d4;
    outline:none;
    background:#fff url(../img/btn_arrows.gif) no-repeat;    
}

div.st_horizontal a.st_prev,div.st_horizontal a.st_ext.prev { /* Previous button */
    left:0px;
    background-position:13px 13px;
    border-top-left-radius:4px;
    -moz-border-radius-topleft:4px;
    -webkit-border-top-left-radius:4px;
}

div.st_horizontal a.st_prev:hover,div.st_horizontal a.st_ext.prev:hover { /* Previous button hover */    
    background-position:-50px 13px;
    background-color:#f5f5f5;
}

div.st_horizontal a.st_next,div.st_horizontal a.st_ext.next { /* Next button */
    right:0px;
    background-position:14px -14px;
    border-top-right-radius:4px;
    -moz-border-radius-topright:4px;
    -webkit-border-top-right-radius:4px;
}

div.st_horizontal a.st_next:hover ,div.st_horizontal a.st_ext.next:hover{ /* Next button hover */    
    background-position:-49px -14px;
    background-color:#f5f5f5;
}

div.st_horizontal a.st_prev.st_btn_disabled, 
div.st_horizontal...

JavaScript

$(document).ready(function() {
    // Horizontal Sliding Tabs demo
    $('div#st_horizontal').slideTabs({
        // Options              
        contentAnim: 'slideH',
        contentAnimTime: 600,
        contentEasing: 'easeInOutExpo',
        tabsAnimTime: 300
    });
    $('.st_ext.prev').click(function(){
        var $active = $('.st_tab_active');
        if($active.parent().prev().length){
          $('.st_ext.prev').attr('href','#' + $active.parent().prev().children().attr('rel'));
          }
        $('.st_ext.next').attr('href','#' + $active.parent().next().children().attr('rel'));
    });

    $('.st_ext.next').click(function(){
        var $active = $('.st_tab_active');
        if($active.parent().next().length){
          $('.st_ext.next').attr('href','#' + $active.parent().next().children().attr('rel'));
          }
        $('.st_ext.prev').attr('href','#' + $active.parent().prev().children().attr('rel'));
    });

});