JSFiddle - React, Tailwind, and code Playground

HTML

<html>

    <head>
        <title> My Name | My Website </title>
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>

    <body>
        <div id="wrapper">
        <header>
            <div class="row">
                <div class="logo">
                    <img src="uw_logo.png">
                </div>
                <ul class="main-nav">
                    <li class="active"> <a href=""> MAIN </a> </li>
                    <li> <a href=""> PROFILE </a> </li>
                    <li> <a href=""> INTERESTS </a> </li>
                    <li> <a href=""> PROJECTS </a> </li>
                    <li> <a href=""> HOBBIES </a> </li>
                    <li> <a href=""> CONTACT </a> </li>
                </ul>
            </div>

            <div class ="name">
            <h1>My Name.</h1>
                <!-- <div class="button">
                    <a href="" class="btn btn-one"> Watch Video. </a>
                    <a href="" class="btn btn-two"> Explore.</a>
                </div> -->
            </div>

            <div class="major">
            <h2>Astrophysics Student.</h2>
            </div>
        </header>
        </div>
    </body>

</html>

CSS

*

{
    margin: 0;
    padding: 0;
}

@keyframes fadeIn
{
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
}

header /* Linear Gradient makes background darker:  */
{
    background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(spaceship.png);
    height: 100vh;
    background-size: 100% 100%;
    background-position: center;
    position: relative;
}

.main-nav /* Place menu bars on right side, take out bullets, space from top */
{
    float: right;
    list-style: none;
    margin-top: 2%;
    margin-right: 1%;
    animation-name: fadeIn;
    animation-delay: 0s;
    animation-duration: 7s;
}

.main-nav li /* Place menu bars in a horizontal line */
{
    display: inline-block;
}

.main-nav li a{ /* Change text style of menu bars */
    color: white;
    text-decoration: none;
    padding: 2px 2px;
    font-family: "Impact", sans-serif;
    font-size: 100%;
}

.main-nav li.active a
{
    border: 2px solid white;
}

.main-nav li a:hover
{
    border: 2px solid white;
}

.logo img
{
    height: auto;
    width: 300px;
    float: left;
    margin-top: -0.5%;
    margin-left: -1%;
    animation-name: fadeIn;
    animation-delay: 0s;
    animation-duration: 7s;
}

body
{
    font-family: monospace;
}

#wrapper {
  max-width: 1600px;
  margin:0 auto;
}
.name
{
    position: absolute;
    top: 40%;
    left: 62.5%;
    animation-name: fadeIn;
    animation-delay: 0s;
    animation-duration: 7s;
}

h1
{
    color: white;
    font-size: 300%;
    font-family: "Palatino Linotype";
}

.major
{
    position: absolute;
    width: 40%;
    left: 17%;
    top: 28%;
    animation-name: fadeIn;
    animation-delay: 0s;
    animation-duration: 7s;
}

h2
{
    color: white;
    font-size: 300%;
    font-family: "Palatino Linotype";
}