JSFiddle - React, Tailwind, and code Playground

by jarod51

HTML

<div id="cssmenu">
    <ul id="list">
        <li>
            <ul>
                <li class="extend"><a href="#home_2">Home2</a></li>
            </ul>
            <a href="#home">Home</a>
        </li>
        <li><a href="#newsletter">Newsletter</a></li>
        <li>
            <ul>
                <li class="extend"><a href="#directions_2">Directions2</a></li>
            </ul>
            <a href="#directions">Directions</a>
        </li>
        <li><a href="#contact">Contact us</a></li>
		<li>
            <ul>
                <li class="extend"><a href="#actor_2">Actor2</a></li>
		        <li class="extend"><a href="#actor_3">Actor3</a></li>
            </ul>
            <a href="#actor">Actor</a>
        </li>
		<li>
            <ul>
                <li class="extend"><a href="#market_2">Market2</a></li>
                <li class="extend"><a href="#market_3">Market3</a></li>
            </ul>
            <a href="#market">Market</a>
        </li>
		<li><a href="#calendar">Calendar</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>
    </div>
	<div id="home_2" class="panel">
    <h2>We are still in Home</h2>
    </div>
    <div id="newsletter" class="panel">
        <h2>Newsletter</h2>
    </div>
    <div id="directions" class="panel">
        <h2>Directions</h2>
    </div>
    <div id="directions_2" class="panel">
        <h2>Directions2</h2>
    </div>
    <div id="contact" class="panel">
        <h2>Contact</h2>
    </div>
	<div id="actor" class="panel">
        <h2>actor</h2>
    </div>
	<div id="actor_2" class="panel">
        <h2>we are still in actor</h2>
    </div>
	<div id="actor_3" class="panel">
        <h2>we are still in actor</h2>
    </div>
	<div id="market" class="panel">
        <h2>market</h2>
    </div>
	<div id="market_2" class="panel">
        <h2>we are still in market</h2>
    </div>
	<div id="market_3"...

CSS

body {
    margin: 0;
}

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

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


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

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

#cssmenu {
    width: 100%;
    position: fixed;
}

#cssmenu ul {
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: bold;
    background: #f2f1f2;
    font-family: Arial, Helvetica, sans-serif;
    border-bottom: 1px solid #f2f1f2;
}

#cssmenu ul:before {
    content: '';
    display: block;
}

#cssmenu ul:after {
    content: '';
    display: table;
    clear: both;
}

#cssmenu ul li {
    float: left;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    position: relative;
}

#cssmenu > ul > li:hover ul {
    display: block;
}

#cssmenu ul li a {
    width: 70px;
    display: block;
    float: left;
    color: #797978;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 20px 7px 20px;
    border-bottom: 3px solid transparent;
    text-align: center;
}

#cssmenu ul li a:hover {
    color: #6c8cb5;
    border-bottom: 3px solid #00b8fd;
}

#cssmenu > ul > li.active > a, #cssmenu ul li ul li.active a {
    display: inline;
    border-bottom: 3px solid #00b8fd;
    float: left;
    margin: 0;
}

#cssmenu ul li ul {
    top: 35px;
    left: 0;
    position: absolute;
    z-index: 1;
    display: none;
}

#cssmenu ul li ul + a:before {
    content: ">";
    position: absolute;
    right: 10px;
    -webkit-transform: rotate(90deg);
}

JavaScript

$(function () {
		var 
			animation = function ( href, speed ) {
				var 
					name = "active",
					element = $( "a[href='" + href + "']" ),
                    extend = element.parent().hasClass( "extend" ),
                    speed = speed ? speed : 1000;
                
				$( "html, body" ).stop().animate( {
					scrollLeft: $( href ).offset().left
				}, speed );
				
			    menu.find( "li" ).removeClass( "active" );
                extend ? element.closest( "ul" ).parent().addClass( name ) : "";
                element.parent().addClass( name );
			},
			menu = $( "#list" );
			
		animation( menu.find( " > li" ).eq( 0 ).find( "> a" ).attr( "href" ) );
		
		$( "#cssmenu ul li a" ).bind( "click", function( event ) {
			var
                target = $( this ).attr("href"),
                extend = $( this ).hasClass( "extend" );
			
			animation( target );
			
			event.preventDefault();
		} );
		
		$( "#next, #prev" ).click( function ( event ) {
			var
				positionActiveClass = menu.find( " > li.active" ).index(),
				menuLength = $( menu ).find( " > li" ).length - 1,
				buttonId = $( this ).attr( "id" ),
                extend = $( menu ).find( "li.active" ).hasClass( "extend" );

            if ( buttonId === "next" ) {
                if ( positionActiveClass === menuLength ) {
                    newElementActiveClass = menu.find( " > li" ).eq( 0 );
                    newPositionActiveClass = newElementActiveClass.find( " > a" ).attr( "href" );
                    
                    animation( newPositionActiveClass );
                } else if ( extend ) {
                    newElementActiveClass = $( menu ).find( "li.active" ).parent().parent().next();
                    newPositionActiveClass = newElementActiveClass.find( " > a" ).attr( "href" );
                    
                    animation( newPositionActiveClass );
                } else {
                    newElementActiveClass = menu.find( " > li" ).eq( positionActiveClass + 1 );
   ...