JSFiddle - React, Tailwind, and code Playground

by Chris Hughes

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="header">
  Citizens Monitoring Project
</div>

<div id="container">
  <div id="left-menu">
    <ul>
      <li><a href="#">Home</a></li>

      <li><a href="#">Add Field Data</a></li>
      <li><a href="#">Add Bacertia Data</a></li>
      <li><a href="#">Add Nutrient Data</a></li>
      <li><a href="#">Add Phytoplankton Data</a></li>
      <li><a href="#">Add Monitoring Station</a></li>
      <li><a href="#">View & Validate Data</a></li>
      <li><a href="#">Create Report</a></li>
      <li><a href="#">STORET</a></li>
    </ul>
  </div>

  <div id="main">
    Welcome to the citizens monitoring project home page.

  </div>

</div>

CSS

body {
  margin: 0px;
  padding: 0px;
}

#header {
  width: 100%;
  font-size: 70px;
  background: #0064fa;
  color: black;
  height: 125px;
  text-align: center;
  line-height: 110px;
}

#container {
  width: 900px;
}

#main {
  padding: 100px;
  height: 100%;
  width: 100%;
  display: inline-block;
  position: absolute;
  left: 250px;
  background: #e0edff;
  font-size: 20px;
}

#left-menu {
  width: 250px;
  height: 100%;
  display: inline-block;
  position: absolute;
  background: #66a3ff;
  left: 0;
}

#left-menu ul {
  margin: 0px;
  padding: 10px 0px;
  list-style: none;
}

#left-menu ul li {}

#left-menu ul li a {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 12px 10px;
  text-transform: uppercase;
  border-bottom: solid 1px #0047b3;
}

#left-menu ul li a:hover {
  background: #0047b3;
}

#left-menu ul li a:selected {
  background: black;
}