JSFiddle - React, Tailwind, and code Playground

by jarod51

HTML

<div id="cssmenu">
    <ul id="list">
        <li><a href="#home">Home</a></li>
        <li><a href="#newsletter">Newsletter</a></li>
        <li><a href="#directions">Directions &amp; Opening Hours</a></li>
        <li><a href="#contact">Contact us</a></li>
    </ul>
    <button id="prev">Previous</button>
    <button id="next">Next</button>
</div>
<div id="wrap">
    <div id="home" class="panel">
        <h2>Home</h2>
        <img src="http://lorempixum.com/200/200/people/3"/>
        &nbsp;
        <img class="img2" src="http://lorempixum.com/200/200/people/1"/>
        
    </div>
    <div id="newsletter" class="panel">
        <h2>Newsletter</h2>
        <!--<img src="http://lorempixum.com/200/200/people/1"/>-->
        <div id="fadetrans">
            <p>the text</p>  
        </div>
    </div>
    <div id="directions" class="panel">
        <h2>Directions</h2>
        <!--<img src="http://lorempixum.com/200/200/people/2"/>-->
        <div id="test"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
    </div>
    <div id="contact" class="panel">
        <h2>Contact</h2>
        <!--<img src="http://lorempixum.com/200/200/people/4"/>-->
<div id="translate">
    <p>translate to right</p>
    </div>
</div>

CSS

body {
    margin: 0;
}

body, #wrap, .panel {
    height: 100%;
    overflow: hidden;
    position: relative;
}

.panel {
    width: 100%;
	display: table;
    background: #eee;
}


#wrap {
    width: 400%; /* 100 multiplied by the number of sections ( 13 ) */
	margin: 0 auto;
    margin-top: 110px;
    float: left;
}

#wrap > div {
    width: 25%; /* 100 divided by the number of sections ( 13 ) */
    float: left;
}

#cssmenu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 1366px;
  position: relative;
  display: block;
  font-size: 12px;
  font-weight: bold;
  background: #f2f1f2;
  font-family: Arial, Helvetica, sans-serif;
  border-bottom: 1px solid #f2f1f2;
  zoom: 1;
}
#cssmenu ul:before {
  content: '';
  display: block;
}
#cssmenu ul:after {
  content: '';
  display: table;
  clear: both;
}
#cssmenu li {
  display: block;
  float: left;
  margin: 0;
  padding: 0 4px;
}
#cssmenu li a {
  display: block;
  float: left;
  color: #797978;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 20px 7px 20px;
  border-bottom: 3px solid transparent;
}
#cssmenu li a:hover {
  color: #6c8cb5;
  border-bottom: 3px solid #00b8fd;
}
#cssmenu li.active a {
  display: inline;
  border-bottom: 3px solid #00b8fd;
  float: left;
  margin: 0;
}
#cssmenu {
position: fixed;
}

    .panel img {
        opacity:0;
        -moz-transition: opacity 3000ms ease-in-out;
        -webkit-transition: opacity 3000ms ease-in-out;
        transition: opacity 3000ms ease-in-out;
    }
    
    .shown img{
        opacity: 1;
    }

.panel .img2{
    opacity:0;
        -moz-transition: opacity 3000ms 2s ease-in-out;
        -webkit-transition: opacity 3000ms 2s ease-in-out;
        transition: opacity 3000ms 2s ease-in-out;
}

.shown1 .img2{
        opacity: 1;
    }

#test p {
    opacity: 0;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;

    -webkit-transition: opacity 5s ease-in;
       -moz-transition: opacity 5s ease-in;
       ...

JavaScript

$(document).ready(function() {
    //$("body").css("display", "none");
    // $(".panel").fadeOut(1000);

    $(".panel").fadeIn(1000);
 
    $("a").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $(".panel").fadeOut(500); 
        $(".panel").fadeIn(1000);
    });
         
    
});

$(function () {
		var 
			animation = function ( href ) {
				var 
					name = "active",
					element = $( "a[href='" + href + "']" ),
                    $target = $( href );
				
				$( "html, body" ).stop().animate( {
					scrollLeft: $target.offset().left
				}, 1200 );
				
				element.closest( "ul" ).find( "li" ).removeClass( name );
				element.parent().addClass( name );
                
                $('#wrap').find('.shown').removeClass('shown');
                $target.addClass('shown');
                $('#wrap').find('.shown1').removeClass('shown1');
                $target.addClass('shown1');
                //text effect
                $('#wrap').find('.load').removeClass('load');
                $target.addClass('load');
                //text translate
                $('#wrap').find('.move').removeClass('move');
                $target.addClass('move');
                
                $('#wrap').find('.showtxt').removeClass('showtxt');
                $target.addClass('showtxt');
                
			},
			menu = $( "#list" );
			
		animation( menu.find( "li" ).eq( 0 ).find( "> a" ).attr( "href" ) );
		
		$( "#cssmenu a" ).bind( "click", function( event ) {
			var target = $( this ).attr("href");
			
			animation( target );
            
            //always want the fade? uncomment this:
            //$('#cssmenu').find('img').css('opacity', 0);
            
            //$(target).find('img').fadeTo(3000,1);
            
			
			event.preventDefault();
		} );
		
		$( "#next, #prev" ).click( function ( event ) {
			var
				positionActiveClass = menu.find( "> li.active" ).index(),
				menuLength = menu.find( "> li"...