JSFiddle - React, Tailwind, and code Playground

by Alex Summers

HTML

<div id="pagecut">
  <div id="pagebg">
    <div id="nav">

      <ul id="subnav">
      <li><a href="new-index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      </ul>
      <div id="sectioncut">
        This is a test. 
      </div>

    </div>

  </div>
</div>

CSS

@charset "utf-8";
/* CSS Document */

body,html { 
	border: 0px;
	margin: 0px;
	height: 100%;
	background-color: #2200FF;
	
}

#pagecut {
	width: 95%;
	height: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0;
	margin-bottom: 0;
	background-color: #2200FF;
	outline-style: solid;
	outline-color:#FF0004;


}

#pagebg {
	width: 100%;
	height: 100%;	
	margin-left: auto;
	margin-right: auto;
	background:url(Img/bg1.png);
	background-size: 100% auto;
	background-repeat:no-repeat;
}


#nav {
	width: 98%;
    height: 100%;
	margin-right: auto;
	margin-left: auto;
	outline-style: solid;
	outline-color:#00FF00;
}

#subnav {
	margin: 0px;
	padding: 0px;
}


#subnav li a:link {
	text-decoration:none;
}

#subnav li {
	display:inline;
	background-color: #7DA5EB;
	border-color: #7DA5EB;
	color: #FFF;
	border-top-right-radius: 7px;
	border-top-left-radius: 7px;
	border-style: solid solid none;
	padding-right: 7px;
	padding-left: 7px;
	margin-left: 2px;
	margin-right: 2px; 
	font-size: x-large;
}

.selected {
	color:#EAF363;
}

#sectioncut {
	height: 100%;
	background-color: #7DA5EB;
}