JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="main.css" rel="stylesheet">
        <link href="awards.css" rel="stylesheet">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
   
        <style>
            body{
                /* height: 61.25vh; */
                /* width: 100vw; */
                /* background-image: white !important; */
            }
        </style>
   
    </head>
    <body>
        <header>
        </header>
        <div id="seperator"></div>
        <div id="content">
            <nav>
                <ul>
                   <li><a href="index.html">Home</a></li>
                    <li><a href="teaching.html">Teaching</a></li>
                    <li><a href="research.html">Research</a></li>
					<li><a href="publications.html">Publication</a></li><!--This hyperlink is a part of dropdown menu-->
                    <li><a href="studentawards.html">Student Awards</a></li>
                    <li><a href="gallery.html">Gallery</a></li><!--This hyperlink is a part of dropdown menu-->
					<li><a href="contact.html">Contact</a></li>
                </ul>
				<div id="sponsorLogo">
					<img id ="logo" src="resources/Acs.png" alt="ACS" height="30%" width="30%"><br><br>
					<img id ="logo" src="resources/nationalInstitudeofHealth.png" alt="ACS" height="30%" width="30%"><br><br>
					<img id ="logo" src="resources/Nsf.png" alt="ACS" height="30%" width="30%"><br><br>
					<img id ="logo" src="resources/Kbrin.png" alt="Kbrin" height="40%" width="40%"><br><br>
					<img id ="logo" src="resources/Cinsam.png" alt="ACS" height="80%" width="80%"><br><br>
					</div>
            </nav>
            <main>
                <!--THIS IS WHAT GETS CHANGED ON THE DIFFERENT PAGES-->
                    <div class="awards">
                        <ul class="awardsItem">
                            <h3>KAS Undergraduate <br> Oral Presentation Competition</h3>
                        ...

CSS

/*Main section for a normal computer screen*/
body{
    margin: 0px;
    background-color: lightblue;
    height: 100%;
}
header{
    /*This is for the header picture background*/
    background-size: 100%;
    background-image: url(resources/Chemistry.jpg);
    background-repeat: no-repeat;
    /* vh = viewheight. Used in place of percentages when percentages don't seem to work. This is basically 30% but not really
    https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh-vw-and */
    min-height: 30vh; 
}
/*Seperate the header from the content*/
#seperator{
    height: 20px;
    background-color: black;
}
#footer{
    overflow:auto;
}
/*THe main content of the site. Where the Flex magic happens.*/
#content{
    display: flex;
    margin: auto;
    height: 100%;
}
/*Navigation Stuffs*/
nav{
    width: 200px;
}
nav ul{
    padding-left: 15px;
    text-align: left;
    list-style-type: none;
    letter-spacing: 0.1em;
}
nav li{
    padding-top: 15px;
}
nav a{
    text-decoration: none;
    color: black;
    font-size: 1.2em;
}
nav li:first-letter { 
					font-weight: bold;
					color: blue;
					}
nav a:hover{
    font-size: 1.5em;
    text-decoration: underline;
}

#sponsorLogo 		{padding-top: 25px;
					text-align: center;
					margin: auto;}
					
#sponsorLogo img	{padding: 1px;
					border: 1px solid blue;
					border-radius: 8px;}
					
/*End Nav*/
main{
    /* background-color: white; */
    flex: 1;
    padding: 10px;
    background-color: white;

}

main{
    /* background-color: white; */
    background-image: radial-gradient(circle, #f6d69b, #ffffff, #f2fbff, #d2fbff, #a7fdff, #82fffc);

}
main h1, h2	{
			text-align: center;
}

#publications 	{text-align: center;
				font-size: 1.2em;}	
				
.research, #course, #problems, #links	{font-size: 1.2em;}


#contact {text-align: center;
		font-size: 18px;}
	
#news{width: 200px;
    background-color: lightblue;
}

/*Footer information*/
footer{
    text-align: center;
   ...