JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://www.kent.k12.wa.us/cms/lib/WA01001454/Centricity/Domain/275/styles.css">
<script src="https://www2.kent.k12.wa.us/KSD/IT/Jonny/step_what_we_do_2.0/jquery-ui.min.js"></script>
<div class="container">
    <div class="slider-wrapper ui-corner-tr ui-corner-tl">
        <ul class="nav-areas ui-corner-all">
            <li><a>Meetings</a></li>
            <li><a>Tech Expo</a></li>
            <li><a>VisFest</a></li>
            <li><a>STAR</a></li>
            <li><a>Events</a></li>
            <li><a>Support</a></li>
        </ul>
        <!-- /nav-areas -->
    </div>
    <!-- /nav-wrapper -->
    <div class="nav-content ui-corner-br ui-corner-bl">
        <div>
             <h3>Meetings</h3>

            <p>As members we hold meetings to discuss our current and future projects,
                also to touch bases with other members and provide feedback about things
                going on in the district.
                <p>
                    <p>
                        <ul>
                            <li>What: STEP Meetings</li>
                            <li>Where: KSD Admin Center</li>
                            <li>When: After school</li>
                            <li>How often: Twice a month</li>
                        </ul>
                    </p>
                    <p>Once a month we meet with the KSD ITL (IT Leaders) to provide feedback
                        about projects that are going on and discuss future initiatives.</p>
        </div>
        <div>
             <h3>Tech Expo</h3>

            <p>Kent School District students use technology to learn new skills to prepare
                for their future every day. Our classrooms are places where students are
                able to try new ways to learn important concepts and, more importantly,
                college and career skills. Students in the One-to-One Laptop Program have
                access to 21st Century learning anytime, from...

CSS

/* #Slider Plugin
================================================== */
 * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
img {
    max-width: 100%;
}
.container {
    margin: 0 auto;
    margin-top: 30px;
    /*width: 704px;*/
}
.handle-containment {
    position: relative;
    height: 80px;
    /*width: 704px;*/
}
.handle {
    position: relative;
    z-index: 2;
    display: inline-block;
    height: 100px;
    width: 117px;
    top: -70px;
    padding-bottom: 1px;
    background: url('https://www2.kent.k12.wa.us/ksd/it/Jonny/step_what_we_do_2.0/images/sprite-slider.png') no-repeat;
    font-weight: bold;
    color: #FFF;
    text-decoration: none;
    text-align: center;
    line-height: 179px;
    cursor:url("https://www2.kent.k12.wa.us/ksd/it/Jonny/step_what_we_do_2.0/images/cursor-grab.gif"), move;
}
.handle:hover {
    color: #FFF;
}
.handle:active {     cursor:url("https://www2.kent.k12.wa.us/ksd/it/Jonny/step_what_we_do_2.0/images/cursor-grabbing.gif"), move;
}
.nav-areas {
    position: relative;
    z-index: 3;
    float: left;
    background: url("https://www2.kent.k12.wa.us/ksd/it/Jonny/step_what_we_do_2.0/images/bg_dark_ie.png") repeat top #343434;
}
ul.nav-areas {
    list-style: none;
    margin: 0px;
}
.nav-areas li {
    float: left;
    width: 117px;
    height: 50px;
    text-align: center;
}
.nav-areas .on a {
    color: #FFF;
}
.nav-areas .divisions {
    border-left: 1px dashed #FFF;
}
.nav-areas li a {
    color: #b2b2b2;
    font-size: 14px;
    font-weight: bold;
    line-height: 50px;
    text-decoration: none;
    display: block;
    cursor: pointer;
}
.nav-content {
    text-align: justify;
    width: 100%;
    overflow: hidden;
    border-top: none;
    padding: 5px 10px 0px 5px;
}

JavaScript

//Content Slider by Jonny Sooter
;
(function ($) {
   
    var Slider = {

        init: function (config) {
            //Set up elements with variables
            this.sliderContent = config.sliderContent;
            this.sectionsWrap = config.sectionsWrap;

            //Selects <a>
            this.sectionsLinks = this.sectionsWrap.children().children();

            //Create drag handle
            this.sectionsWrap.parent().append(
                $(document.createElement("div"))
                    .addClass("handle-containment")
                    .append($(document.createElement("a")).addClass("handle ui-corner-all").text("DRAG"))
            );

            //Select handle
            this.sliderHandle = $(".handle");
            
            // how many sections do we have, and what is the total width of the navbar (as sections*section/slider width)
            var sectionCount = this.sectionsLinks.length;
            var sliderWidth = parseInt($(".handle").css("width"));
            var totalWidth = sectionCount*sliderWidth;

            // we need to explicitly set the width so that all positioning works
            this.sliderHandle.parent().attr({ style: "width: "+totalWidth+"px;" });

            this.bindEvents();
            this.showFirst();
        },

        bindEvents: function () {
            this.sectionsLinks.on("click", this.wasClicked);
            this.sliderHandle.on("mousedown", this.dragLightUp);
            this.sliderHandle.on("mouseup", this.dragLightOff);
        },

        showFirst: function () {
            this.sliderContent.children().hide();
            this.sliderContent.children(':first').show();
            this.sectionsWrap.children(':first').addClass('on');

            this.setUpDrag();
        },

        setUpDrag: function () {
            this.sliderHandle.draggable({
                axis: "x",
                containment: "parent",
                stop: function (event, ui) {
                    var left =...