JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Neighbors from Space</title>
    <link rel="stylesheet" type="text/css" href="C:\Users\evano\Documents\solarSystem.css">
</head>
<body>
    <div id="wrapper">
    
        <div class="header">
        <div class="logo">
            <h1>Neighbors from Space</h1>
            <br>
            <h3>    Created by Evan O'Grady</h3>
        </div>
    </div>
        <nav class="drop-down">
        <button type="button">About</button>

        <label for="planets-nav"><strong>Planets: </strong></label>
        <select id="planets">
            <option value="Mercury">Mercury</option>
            <option value="Venus">Venus</option>
            <option value="Earth">Earth</option>
            <option value="Mars">Mars</option>
            <option value="Jupiter">Jupiter</option>
            <option value="Saturn">Saturn</option>
            <option value="Uranus">Uranus</option>
            <option value="Neptune">Neptune</option>
        </select>

        <label for="references"><strong>References for: </strong></label>
        <select id="references">
            <option value="Mercury">Mercury</option>
            <option value="Venus">Venus</option>
            <option value="Earth">Earth</option>
            <option value="Mars">Mars</option>
            <option value="Jupiter">Jupiter</option>
            <option value="Saturn">Saturn</option>
            <option value="Uranus">Uranus</option>
            <option value="Neptune">Neptune</option>
        </select>



        <label for="contact"><strong>Contact: </strong></label>
        <select id="contact">
            <option value="email">Email</option>
            <option value="linkedin">LinkedIn</option>
            <option value="github">GitHub</option>
        </select>

    </nav>

        <section class="planets">
        <img src="C:\Users\evano\Downloads\Mercury.jpg" alt="Mercury">
        <img src="C:\Users\evano\Downloads\Venus.jpg" alt="Venus">
        <img...

CSS

body {
    background: #004882;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

html{
    height: 100px;
}

.header {
    width: 100%;
    height: 150px;
    display: black;
    background-color: #101010
    /* A lot of the information I got for making the header I got from this youtube video
    https://www.youtube.com/watch?v=GxwHXxumdQk
    */
}
.logo {
    height: 100%;
    display: table;
    float: left;

}

.logo h1{
    color: white;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-family: "Lucida Console", Courier, monospace;
    font-size: 50px;
}

.logo h3{
    color: white;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-family: "Lucida Console", Courier, monospace;
}

.navigation {
    float: right;
    height: 100%;
}

.navigation a {
    height: 100%;
    display: table;;
    float: left;
    padding: 0px 20px;
}

.drop-down{
    display: table-cell;
    vertical-align: middle;;
    height: 100%;
    color: white;
    font-family: monospace;
    background-color: gray;
    font-size: 20px;
}

.drop-down select {
    font-family: monospace;
    font-weight: bold;
    font-style: italic;
    font-size: 15px;
}

.drop-down button{
    font-family: monospace;
    background-color: gray;
    color: white;
    font-size: 20px;
}

.drop-down button:hover{
    background-color: #008B8B;
}

img {
    height: 150px;
    width: 150px;
    border-radius: 50%;

    min-height: 100%;
}

.planets img{
    height: 300px;
    width: 300px;
}


/* I got some info on arranging the layout of the 
imgaes from here
https://stackoverflow.com/questions/12813573/position-icons-into-circle
*/
.planets {
    position: relative;
    width: 24em;
    height: 24em;
    padding: 2.8em;
    border: dashed 1px;
    border-radius: 50%;
    margin: 1.75em auto 0;
}

.planets a{
    display: block;
    position: absolute;
    top: 50%; left: 50%;
   ...