JSFiddle - React, Tailwind, and code Playground

by raad

HTML

<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 anywhere.</p>
            <p>Kent School District’s annual Technology Expo showcases how students gain
                college and career skills...

CSS

#myresult {
    margin-top: 50px;
    background-color: #eef;
}

#jonnysresult {
    margin-top: 50px;
    background-color: #efe;
}

/* #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

/**
     * function to find the index of an array element where a given value falls
     * between the range of values defined by array[index] and array[index+1]
     */
    function findInRangeArray(arr, val){
      for (var n = 0; n < arr.length-1; n++){
          
          if ((val >= arr[n]) && (val < (arr[n+1]))) {
              break;
          }
      }
      return n;
    }

    /**
     * function to set up arrays containing positional values
     */
    function initPositionArrays() {
        posArray = [];
        leftPosArray = [];
        
        var totalWidth = 585;
        var xPos = 81;
        
        var len = $("#sectionContainer").children().length;
        var unit = totalWidth/(len - 1);
            
        for (var i=1; i<=len; i++) {
          pos = unit*(i-1);
          posArray.push([Math.round(pos), i]);
          xMin = (i >= 2 ? (i==2 ? xPos : leftPosArray[i-2] + posArray[1][0]) : 0);
          leftPosArray.push(Math.round(xMin));
        }
    }

function jonnys(left, section) {
        //self = Slider, //Set to the Slider object cus func is a callback
        position = 1;
        //sections_count = self.sectionsLinks.length, //Count the sections
        sections_count = section.children().length;
        //Set width of each section according to total width and section count
        section_position = Math.floor(section.width() / sections_count);

    left = Math.round(left / section_position); //Set the index
    position = (left * section_position); //Set the left ammount

    if(position < section_position){ //If handle is dropped in the first section
        position = 0.1; //Set the distance to animate
        left = 0; //Set index to first section
    }

    /*
    if (position.length) {
        $(this).animate({
            left : position //Animate according to distance
        }, 200);
        left = left += 1; //Add one to the index so that I can use the nth() child selector later.
       ...