JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://areaaperta.com/nicescroll/js/jquery.easing.1.3.js"></script>
    <script src="http://areaaperta.com/nicescroll/js/jquery.nicescroll.min.js"></script>

<ul class="tabs">
                <li class="tab1"><a href="#tab1">All Teams</a></li>
                <li class="tab2"><a href="#tab2">Senior A's</a></li>
                <li class="tab3"><a href="#tab3">Senior B's</a></li>
    

            <div class="tab_container">
            
                
                <div id="tab1" class="tab_content">
                <div id="divexample1">
                    
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.
Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.
Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi volutpat. Vivamus ac rutrum elit. Suspendisse semper orci vitae sapien sollicitudin mattis.
Integer malesuada molestie dolor sit amet viverra. Mauris nec urna lorem. Integer commodo feugiat ligula eget fermentum. In in tellus a risus convallis pellentesque. Cras non faucibus est. Morbi sagittis risus mollis nisl mollis ac mattis mi...

CSS

html, body {
overflow-x: hidden; 
font-family:Arial, Helvetica , sans-serif;
font-size: 12px;
background-image: url(bgtest.png); background-repeat: repeat;
color:#333;
line-height:1.50;

}

#divexample1, #divexample2  {
overflow: hidden;
    max-height: 281px;
min-height: 281px;
    width: 400px;
}

ul.tabs {
        list-style: none;
        height: 48px;
        border: 1px solid #ccc;
        border-top:3px solid #85BC77;
        margin-top: 15px;
        margin-left: 15px;
        width: 471px;
        background-color: #E8E8E8;
        position: fixed;
    
        
    }
    
    
    
    ul.tabs li {
     float: left;
     margin: 0;
     padding: 0;
     height: 48px; /*--Subtract 1px from the height of the unordered list--*/
     line-height: 48px; /*--Vertically aligns the text within the tab--*/
     border-left: none;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;

    background-color: #E8E8E8;
    }
    ul.tabs li a {
     text-decoration: none;
     color: #333;
    font-weight: normal;
     display: block;
     width: 156px;
    text-align: center;
     outline: none;

    background-color: #E1E1E1;
    
    }
    
     ul.tabs li.active1, ul.tabs li.active1 a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
     border-bottom: 1px solid #e8e8e8; /*--Makes the active tab look like it's connected with its content--*/

    }
    
    ul.tabs li.active1 a {
                background-color: #E8E8E8;
    }
    
        ul.tabs li a:hover {
         background: #E8E8E8;
        border-bottom: none;
        }
        
ul.tabs li.tab4 {
border-right: none;
background-color: #E8E8E8;
}

.tab_container {
margin-left: -1px;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top: none;
background-color: #E8E8E8;

width: 471px;
height: 480px;
overflow: hidden;
}

.tab_content { padding: 15px;}

JavaScript

$(document).ready(function() {

    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active1").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content
    //On Click Event
    $("ul.tabs li").click(function() {

        $("ul.tabs li").removeClass("active1"); //Remove any "active" class
        $(this).addClass("active1"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });

});

$(document).ready(function() {
    $("body").niceScroll();

    $("#divexample1").niceScroll({
        cursorcolor: "#ccc",
        cursorborder: "0px",
        cursorborderradius: 0,
        scrollspeed: 5,
        mousescrollstep: 5,
        cursorwidth: 8,
        cursoropacitymin: 0.4
    });


    $("#divexample2").niceScroll({
        cursorcolor: "#ccc",
        cursorborder: "0px",
        cursorborderradius: 0,
        scrollspeed: 5,
        mousescrollstep: 15,
        cursorwidth: 8,
        cursoropacitymin: 0.4
    });
});