JSFiddle - React, Tailwind, and code Playground

by Arkl1te

HTML

<header>
			<div class="row2">
				<nav>
					<a href="#" class="selected">Everything</a>
					<a href="#">1</a>
					<a href="#">2</a>
				 	<a href="#">3</a>
					<a href="#">four</a>
					<a href="#">five</a>
					<a href="#">six</a>
				</nav>	
				<div class="compactmenu-button"></div>
				<br style="clear:both" />
			</div>

			<div class="row3">
				<div class="secondnav">
					<a href="#">item1</a>
					<a href="#">item2</a>
					<a href="#">bigitem3</a>
					<span>moreitems
						<ul>
							<li><a href="#">extraitem1</a></li>
							<li><a href="#">bigextraitem2</a></li>
							<li><a href="#">extraitem3</a></li>
							<li><a href="#">extraitem4</a></li>
						</ul>
					</span>
				</div>
				<br style="clear:both" />
			</div>

			<!-- <div class="plugin-placeholder"></div> -->

		</header>

CSS

html{
    overflow-y: scroll;
}
body{margin: 0}

header .row2 {
    background-color: black;
    position: relative;
}
header .row2 nav{
	float: right;
	width: 670px;
	height: 46px;
}
header .row2 nav a,
header .row3 .secondnav span,
header .row3 .secondnav a{
	color: white;
	text-decoration: none;
	font-family: impact;
	font-size: 32px;
	padding: 0 15px;
	border-right: 1px solid #454641;
	display: block;
	float: left;
	margin-top: 7px;
}
header .row2 nav a.selected{
	background-color: #ff6c00;
	border-radius: 5px 5px 0 0;
}
header .row2 nav a:last-child{
	border-right: none;
	margin-right: 10px;
}

header .compactmenu-button{
	display:none;
	background-color: red;
	width: 100px;
	height: 30px;
	cursor: pointer;
	border-radius: 5px;
	margin: 10px;
	float: right;
}

header .row3{
	border-top: 5px solid #ff6c00;
	/* border-bottom: 1px solid #909090; */
}
header .row3 .secondnav{
	float: right;
	margin-right: 15px;
}
header .row3 .secondnav a,
header .row3 .secondnav span{
	color: #ff6c00;
	font-size: 24px;
	border-right: 1px solid #ffe1b6;
}
header .row3 .secondnav a:last-child{
	border-right: none;
}

header .row3 .secondnav a li{
	border: 1px solid #ff6c00;
}

header .row3 .secondnav span:hover{
	color: #ff9000;
}
header .row3 .secondnav span{
	position: relative;
	cursor: default;
	padding-bottom: 3px;
}
header .row3 .secondnav span:last-child {
    border-right: none;
}
header .row3 .secondnav span ul{
	list-style: none;
	display: none;
	position: absolute;
	z-index: 999;
	right: 0;
	top: 32px;
	border: 1px solid #ff6c00;
	border-top: none;
	background: white;
}
header .row3 .secondnav span:hover ul{
	display: block;
}
header .row3 .secondnav span li a{
	font-family: arial, helvetica, sans-serif;
	font-size: 14px;
	display: block;
	color: #ff6c00;
	background-color: white;
	width: calc(100% - 30px);
	border-bottom: 1px solid #dadada;
	padding: 5px 0px;
	margin: 0 15px;
}

header .row3 .secondnav span li:last-child a {
    border-bottom: none;
    margin-bottom:...

JavaScript

jQuery(window).resize(function(){
	var button = jQuery('.compactmenu-button');
	if($('body').innerWidth() >= 680){
		if (!button.is(':visible')){
			jQuery('nav').css('display', 'block');
		}
	}
	else{
		jQuery('nav').css('display', 'none');
	}
    console.log("window: " + $(window).innerWidth());
    console.log("document: " + $(document).innerWidth());
    console.log("html: " + $('html').innerWidth());
    console.log("body: " + $('body').innerWidth());
});
jQuery(document).ready(function(){
	var button = jQuery('.compactmenu-button');
	button.click(function() {
		jQuery('nav').slideToggle('fast');
	});
});