JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<style type="text/css">
			body{
				background-color: salmon;}
			header {
				height:80px;
				backround-color:#C0504D;
				color: white;
				text-align: center; }
      nav{
        border-top: solid 2px white;
        background-color: rgb(229,184,183);
        text-align: center;
        height: 80px;
        vertical-align: middle;
        line-height: 80px;
      }
			nav li + li:before{
				content: " | "
			}
			nav li{
				display: inline;
				list-style-type: none;
        border: solid 1px black;
        margin: 20px 0px;
        
			}
			nav li a{
				font-size: 18px;
    }
		</style>
		<meta charset="utf-8">
		<title>My Submission Dates</title>
	</head>
	<body>
		<header>
			<h1 style="line-height: 80px;">ABOUT MY COURSES</h1>
		</header>
  <nav>
    <ul>
    
    <li><a href="submissionDates.html">Submisson Dates</a></li>
		<li><a href="courseTutors.html">Course Tutors</a></li>
		<li><a href="classTimes.html">Class Times</a></li>
    </ul>
    
    
  </nav>
		<p>Inormation on <b>submission</b> dates.</p>
		<a href="moduleTutors.html">Module Tutors</a>
		<img src="deadline.png" alt="A deadline Image" width="104" height="142">
	</body>
</html>