JSFiddle - React, Tailwind, and code Playground

by Joel Ferreira

HTML

<ul class="nav">
   <li class="thumb1"><a href="#panel1" title="Panel 1">Panel 1</a></li>
   <li><a href="#panel2">Panel 2</a></li>
   <li><a href="#panel3">Panel 3</a></li>
</ul>


<div class="panels">
    <div class="slider">


        <div id="panel1">
          <p>From this day forward, Flight Control will be known by two words: 'Tough' and 'Competent.' </p>
          <p>It's just mind-blowingly awesome. I apologize, and I wish I was more articulate, but it's hard to be articulate when your mind's blown—but in a very good way.</p>
                </div>


       <div id="panel2">
           <p>From this day forward, Flight Control will be known by two words: 'Tough' and 'Competent.' Tough means we are forever accountable for what we do or what we fail to do. We will never again compromise our responsibilities. </p>
           <p>Every saint and sinner in the history of our species lived there--on a mote of dust suspended in a sunbeam.</p>
        </div>

       <div id="panel3">
         <p>These words are the price of admission to the ranks of Mission Control.</p>
         <p>It's just mind-blowingly awesome. I apologize, and I wish I was more articulate, but it's hard to be articulate when your mind's blown—but in a very good way.</p>
        </div>
    </div>
</div>

CSS

.nav {
  width: 65px;
  background: #eee;
  float: left;
  margin: 0;
  padding: 25px;
  list-style-type: none;
}
.nav li {
  padding: 0;
}
.nav li a {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.panels {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
  float: left;
}
.slider {
  width: 2500px;
}
.slider div {
  float: left;
  position: relative;
  width: 497px;
  border: 1px solid purple;
}

JavaScript

//Slider 
    //object containing margin settings
    var margins = {
        panel1: 0,
        panel2: -500,
        panel3: -1000
    }
    
    //handle nav click
    $(".nav a").click(function(e){
        
        //stop browser default
        e.preventDefault();
        
        //remove on states for all nav links
        $(".nav a").removeClass("on");
        
        //add on state to selected nav link
        $(this).addClass("on");
        
        //set margin of slider to move
        $(".slider").animate({
            marginLeft: margins[$(this).attr("href").split("#")[1]]
        });                    
    });