JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <link href="css/style2.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
    <script type="text/javascript" src="js/jq2.js"></script>


</head>

<body>
        <div>

              <ul id="nav">
                 <li><a href=""> a blog by:</a></li>
                <li><a href=""> about:</a></li>
                <li><a href="">contact:</a></li>
                <li><a href=""> projects by:</a></li>
              </ul>

        </div>

</body>

</html>

CSS

div {
  background-color: yellow;
  border-width: 1px;
  border-style: solid;
  border-color: black;
  min-height: 50px;
  }

JavaScript

$(document).ready(function() {
     
     
     var divCode = String();
     
     
     //grab each list item and put it in its own div
     
     $('#nav li').each(function() {
         divCode += "<div>" + $(this).html() + "</div> ";
     });
     
     
     //get rid of the list and replace it with a plane ol' div
     //then fill that it with our new "button" divs 
     
     $('#nav').replaceWith('<div id="newNav"> </div)');
     $('#newNav').html(divCode);
     
     
     //add some functionality to the divs
    
     $('#newNav div').addClass('fader')
                     .each(function() {
             
                 if ($(this).css('position')!='relative' || $(this).css('position')!='absolute'){
                     $(this).css('position','relative');
                 }       
             })
             .css('cursor', 'pointer')
            .click(function() {                        
                switchDivs($(this));
            });
     
     
     //set the min-height of the nav div
     $('#newNav').css('minHeight', $('#newNav').height());
     
     setFocus($('#newNav div').first());
     
     $('.fader').hide();
     
     function fadeOn(speed) {
          
         $('.fader').fadeTo(speed, 100);
         alert('over');
     }
     
     function fadeWipe(speed) {
         
         $('.fader').fadeTo(speed, 0);
         alert('out');
     }
     
     function setFocus(obj) {
     
         obj.removeClass('fader')
            .addClass('focus')
            .css('backgroundColor', 'red')
           .hover(fadeOn(500),fadeWipe(500));
     }
     
     function switchDivs(obj2) { //obj2 is the object to become the focus div
         
        var obj1 = $('.focus');
        
        //if the two objects are the same, quit
        if (obj1.text() == obj2.text()) { 
            return;
        }
        
        var oneOff = obj1.offset();
        var oneDirectionY = "-"; //lol...one direction
        
        var twoOff = obj2.offset();
...