JSFiddle - React, Tailwind, and code Playground

by rsrsrs

HTML

<div id="nav_Wrapper_dk">

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

		<div class="item"><a href="#home" class="link_Button sliding-u-l-r scroll">Link 1</a></div>

		<div class="item"><a href="#link4" class="link_Button sliding-u-l-r">Link  2</a></div>
		
    <div class="item"><a href="#contact" class="link_Button sliding-u-l-r scroll">Link 3</a></div>
    
		<div class="item"><a href="#link6" class="link_Button sliding-u-l-r">Link 4</a></div>

	</nav>

</div>

CSS

body{
 background-image: url(
 "http://www.cleanguard.com/assets/clean-office.jpg");
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size: cover;
}

a {
  	text-decoration: none;
}

#nav_Wrapper_dk {
	position: fixed;
	width: 100%;
	height: 60px;
	background: white;
	border-bottom: 1px solid #f1f1f1;
}
	/* Vertical Left Aligned Logo */
	#logo_dk {
		position: fixed;
		width: 120px;
		height: 120px;
		left: 0;
		top: 40%;
		background: yellow;
		border-top: 1px solid #f1f1f1;
		border-bottom: 1px solid #f1f1f1;
		border-right: 1px solid #f1f1f1;
	}

	#dk_Nav {
		max-width: 950px;
		/* width: 742.6167px; */
		height: 60px;
		margin-left: auto;
		margin-right: auto;
		top: 0;
		right: 0;
		left: 0;
		z-index: 2001;
	}

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



		.link_Button {
			display: block;
			float: left;
			height: 60px;
			font-family: 'Open Sans', sans-serif;
			font-size: .7em;
			color: black;
			line-height: 5.7em;
			text-transform: uppercase;
			letter-spacing: .2em;
			margin-right: 40px;
		}

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

		.sliding-u-l-r:after {
			content: '';
            display: block;
            height: 3px;
            width: 100%;
            background: transparent;
            transition: width .3s ease, background-color .3s ease;
            padding-left: 6px;
            padding-right: 6px;
            position: relative;
            left: -6px;
            margin-top: -5px;
		}

		.sliding-u-l-r:hover:after {
			width: 100%;
			background: black;
		}

		.sliding-u-l-r.active:after {
		  width: 100%;
		  background: black;
		}