JSFiddle - React, Tailwind, and code Playground

by rsrsrs

HTML

<div id="nav_Wrapper_dk">
	<nav id="dk_Nav" role="navigation" class="cf">

		<div><a href="#home" class="link_Button sliding-u-l-r scroll">Home</a></div>
		<div><a href="#about" class="link_Button sliding-u-l-r scroll">About us</a></div>
		<div><a href="#link3" class="link_Button sliding-u-l-r">Gallery</a></div>
		<div><a href="#link4" class="link_Button sliding-u-l-r">Find Us</a></div>
		<div><a href="#link5" class="link_Button sliding-u-l-r">Contact</a></div>
		<div><a href="#link6" class="link_Button sliding-u-l-r">Catering</a></div>
		<div><a href="#link7" class="link_Button sliding-u-l-r">Blog</a></div>

	</nav>

</div>


<div id="home"></div>

<div id="about"></div>

CSS

#nav_Wrapper_dk {
	position: fixed;
	width: 100%;
	height: 50px;
	background: white;
	border-bottom: 1px solid #f1f1f1;
}

	#dk_Nav {
		width: 742.6167px;
		height: 50px;
		margin-left: auto;
		margin-right: auto;
		top: 0;
		right: 0;
		left: 0;
		z-index: 2001;
    background: white;
	}

		#dk_Nav div {
			margin-top: 11px;	
		}

		.link_Button {
			display: block;
			float: left;
			height: 40px;
			font-family: 'Open Sans', sans-serif;
			font-size: .7em;
			color: black;
			line-height: 3.3em;
			text-transform: uppercase;
			letter-spacing: .2em;
			margin-right: 44.8px;
		}
    
    #dk_Nav div a {
      text-decoration: none
    }

		/* LEFT TO RIGHT */
		.sliding-u-l-r {
			display: inline-block;
		}

		.sliding-u-l-r:after {
			content: '';
			display: block;
			height: 3px;
			width: 0;
			background: transparent;
			transition: width .3s ease, background-color .3s ease;
		}

		.sliding-u-l-r:hover:after {
			width: 100%;
			background: black;
		}
    
    
    #home {
      width: 100%;
      height: 1000px;
      background: #ccc;
    }
    
    #about {
      width: 100%;
      height: 1000px;
      background: white;
    }

JavaScript

// Scroll Menu
jQuery(document).ready(function($) {
  $(".scroll").click(function(event) {
    event.preventDefault();
    $('html,body').animate( { scrollTop:$(this.hash).offset().top } , 1000);
  });
});