JSFiddle - React, Tailwind, and code Playground

by Don Johnson

HTML

<div class="orangebar">
    <div id="navbar">
        <!-- Navbar -->
        <nav class="main-nav">
            <ul>
                <li>BOARD OF TRUSTEES
                    <ul>
                        <li>Board Policy Manual</li>
                        <li>Monitoring Reports</li>
                        <li>Monthly Board Packets</li>
                    </ul>
                </li>
                <li>RESOURCES
                    <ul>
                        <li>Academics</li>
                        <li>Student Services</li>
                        <li>Human Resources</li>
                        <li>Business Office</li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
    <!-- End Navbar -->
</div>
<!-- End Orangebar -->

CSS

* {
						margin:0;
						padding:0;
				}
				.orangebar {
						border-top:#f36f21 solid 5px;
						width:100%;
				}
				#navbar {
						width:20%;
						background:#14325c;
						height:39px;
						margin:-5px 0 0 0;
				}
				.main-nav {
						width:100%;
						position:realtive;
						background:#14325c;
				}
				.main-nav ul {
						text-align:left;
						display:block;
						margin:0 auto;
						padding:0;
						list-style:none;
						width:1024px;
				}
				.main-nav ul li {
						display:inline-block;
						margin:0;
						position:relative;
						padding:10px 20px 10px 20px;
						background:#14325c;
						color:#fff;
						cursor:pointer;
						float:left;
				}
				.main-nav ul li:hover {
						text-decoration:none;
						background:#afb1b4;
						color:#fff;
				}
				.main-nav ul li ul {
						padding:0;
						position:absolute;
						top:34px;
						left:0;
						width:233px;
						margin:0;
						display:none;
				}
				.main-nav ul li:hover ul {
						display:block;
				}
				.main-nav ul li ul li {
						background:#afb1b4;
						display:block;
						color:#fff;
				}
				.main-nav ul li ul li:hover {
						background:#d5d6d8;
						color:#F36F21;
						-moz-box-shadow:0px 2px 5px 2px rgba(119, 119, 119, 0.5);
						-webkit-box-shadow:0px 2px 5px 2px rgba(119, 119, 119, 0.5);
						box-shadow:0px 2px 5px 2px rgba(119, 119, 119, 0.5);
				}

JavaScript

$(function(){
				setLayout();
				$(window).resize(setLayout);
			});
			var setLayout = function(){
				$('#navbar').css({"padding-left": ($(window).width() - 1024) / 2 + 'px'});
			}