JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <header>
        <nav class="header">
            <ul>
                <li><a href= "#">Contact</a></li>
                <li><a href= "#">Values</a></li>
                <li><a href= "#">About</a></li>
                <li><a href= "#">Home</a></li>
            </ul>		
        </nav>
    </header>
    <article>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />     bleep blorp bloop
    </article>
</body>

CSS

/*
	Vendor Tags 

	-webkit-
	-khtml-
	-moz-
	-ms-
	-o-

	Spare Tag

element
{
	tag
}

*/


/* Debugging */

*
{
	border: 1px solid red;
}  */

/* Blocking & Defaults */

header, article, aside, figure, figcaption, hgroup, section, nav
{
	display: block;	
}

*
{
	font-family: 'Kozuka Gothic Pro EL', 'Kozuka Gothic Pro', Myriad, Helvetica, sans-serif;
	font-size: 100%;
	color: white;
	padding: 0px;
	margin: 0px;
}


/* Body */

body 
{
	background-color: #bbffff;
	font-weight: normal;
	position: relative;
	min-width: 1000px;
	max-width: 2000px;
}

/* All Navigation */

nav {
    position: absolute;
    right: 0;
    top: 0;
	width: 100%;
	height: 82px;
	background-color: #7396ff;
	border-bottom: 3px solid #bbbbbb;
}

nav ul {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
	padding-right: 10%;
	list-style-type: none;
	font-size: 125%;
    line-height: 1;
}

nav ul li {
	display: inline-block;
	vertical-align: bottom;
	float: right;
}

nav ul li a {
	color: white;
	text-decoration: none;
}


/* Header */

/* .sidebar, Sidebar */

/* Footer */