JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <nav id="primary">
        <a>Test</a>
        <a>Test</a>
        <a>Test</a>
        <a>Test</a>
    </nav>
    <div><iframe width="560" height="315" src="//www.youtube.com/embed/0HxNtWEIKhQ?wmode=transparent" frameborder="0" allowfullscreen></iframe><div>
</body>

CSS

#primary header {
position: fixed;
margin: 0;
padding: 0; 
width: 100%;
height: 50px;
background-color: rgb(49,49,49);
}
nav { /* positions nav menu */
position: fixed; /* keeps the nav bar fixed at top when scrolling */
top: 1.25%;
left: 27%;
background-color:#000;
}
nav a {
margin: 0 50px;
padding: 10px 20px;
font-size: 20px;
color: #fff;
}

div {
    width: 560px;
    margin: 0 auto;
}

body { min-height: 800px; }