JSFiddle - React, Tailwind, and code Playground

HTML

<header>

    <h1>Logo</h1>

    <nav class="product_categories">
        <ul>
            <li><a href="#"><span>Product One</span></a></li>
            <li><a href="#"><span>Product Two</span></a></li>
        </ul>
    </nav>
    
    <a href="#" class="cta">Call To Action</a>
    
    <nav class="secondary_navigation">
        <ul>
            <li><a href="#">Page One</a></li>
            <li><a href="#">Page Two</a></li>
            <li><a href="#">Page Three</a></li>
        </ul>
    </nav>

</header>

SCSS

html, body { padding:0; margin:0; }
html *{ font: 12px Arial; }

// MEDIA QUERIES
   $mq-600 : 'screen and (max-width: 600px)';

// DIMENSIONS
   $head-height : 50px;

// COLOURS
   $cta : #bada55;

header{
	background-color: rgba(0,255,255,0.75);
	position: relative;
	width: 100%;
	ul{
		box-sizing: border-box;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	li{
		display: inline-block;
		height: $head-height;
		line-height: $head-height;
		margin: 0;
		padding: 0;
		a{
			padding: 0 10px;
		}
	}
	// ----------------------
	//   Primary navigation
	// ----------------------
	.product_categories{
		background-color: #fff;
		display: inline-block;
		height: 50px;
		@media #{$mq-600} {
			display: block;
			height: auto;
			// -------------------------------------
			//   Large category buttons for mobile
			// -------------------------------------
			li{
				background-color: #d3e1e5;
				float: left;
				height: 100%;
				position: relative;
				width: 50%;
				a{
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					span{
						position: absolute;
						bottom: 0;
					}
				}
				&:before{
					content:'';
					display: block;
					padding-top: 100%;
				}
			}
		}
	}
	// -----------------------------------
	//   Top-level call to action button
	// -----------------------------------
	.cta{
		border: 0;
		background-color: $cta;
		display: inline-block;
		float: right;
		line-height: 30px;
		margin: 10px;
		padding: 0 10px;
		@media #{$mq-600} {
			position: absolute;
			top: 0;
			right: 0;
		}
	}
	// ------------------------
	//   Secondary navigation
	// ------------------------
	.secondary_navigation{
		background-color: #fff;
		display: inline-block;
		height: 50px;
		float: right;
		@media #{$mq-600} {
			width: 100%;
            //display: block;
			float: none;
		}
	}
}

h1{
	display: inline-block;
	height: $head-height;
	line-height: $head-height;
	padding: 0 10px;
}