JSFiddle - React, Tailwind, and code Playground

by Ikechukwu Kalu

HTML

<div id="header">
	  
	  	<div id="navigation">
	  		
	  		<ul>
	  			<li id="nav-meny"><a href="#">Tabi1</a></li>
	  			<li id="nav-meny"><a href="#">Tabi2</a></li>
	  			<li id="nav-meny"><a href="#">Tabi3</a></li>
	  			<li id="nav-meny"><a href="#">Tabi4</a></li>
	  			<li id="nav-meny"><a href="#">Tabi5</a></li>
		  	</ul>

	  	</div>   <!-- end of navigation -->

	  </div> <!--end of header -->

	
	<div id="content">

		<!-- Content here -->
  		<h3> Here will be content...</h3>
  		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.
  			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit...

CSS

/*--------------general-----------------*/
body {
	margin: 0px;
	padding: 0px;
}

*{
  margin:0px;
}

/*------------header--------------------*/

#header {
	background-color: #d4e6d5;
	display: block;
	margin-bottom: 0;
	padding-bottom: 0;
}

#header #navigation {
	width: 1100px;
	background-color: red;
	margin-left: 133px;
	
}

#navigation ul {
	list-style: none;
	width: 685px;
	margin-left: 173px;
}

#navigation #nav-meny {
	display:inline-block;
	border:solid;
	border-bottom: none;
}

#navigation li a{
	text-decoration: none;
	display: inline-block;
	padding: 20px;
	padding-left: 40px;
	padding-right: 40px;
	color: black;
	font-size: 16px;
	font-weight: bold;
	background-color: teal;
}

#navigation li a:hover {
	background-color: yellow;
}

/*------------------ contenti ---------------*/

#content {
	width: 1100px;
	background-color: grey;
	margin-left: 133px;
	min-height: 580px;
}

#content h3 {
	margin-left: 20px;
	margin-top: 0px;  
	/*gives margin top to whole content div???*/
}


/*---------------- footeri --------------------*/

#footer {
  background-color: red;
}

#footer p {

}