JSFiddle - React, Tailwind, and code Playground

by omarqa

HTML

<div id="wrapper">
<div id="header">
 <img src="logo.png" width=200px; height=100px; />
</div>
	<nav id="nav" ><ul><li><a href="http://www.jukaijuiceco.com/why-juice/">About us</a>&emsp;&emsp;&emsp;</li>
<li><a href="http://www.jukaijuiceco.com/our-juices/">Locations</a>&emsp;&emsp;&emsp;</li>
<li><a href="http://www.jukaijuiceco.com/get-juice/">Contact us</a>&emsp;&emsp;&emsp;</li>
<li><a href="http://www.jukaijuiceco.com/about/">FAQ</a>&emsp;&emsp;&emsp;</li>
<li><a href="http://www.jukaijuiceco.com/about/">News</a>&emsp;&emsp;&emsp;</li>
<li><a href="http://www.jukaijuiceco.com/about/">Testemonials</a>&emsp;&emsp;&emsp;</li>
</ul></nav>
<div id="left-sidebar">
	<h4>Flavors</h4>
	<p class="desc">(Click on the pictures to learn more!)</p>
	<br />
	 &nbsp;&nbsp;<img class="im" src="aca.jpg" height=100px; width=100px;><span class="desc">Smashmouth Acai&#0153;</span>
	 <br /><br /><br /><br /><br /><br />
	 &nbsp;&nbsp;<img class="im" src="apple.jpg" height=100px; width=100px;><span class="desc">Apple Attack&#0153;</span>
	 <br /><br /><br /><br /><br /><br />
	 &nbsp;&nbsp;<img class="im" src="berry.jpg" height=100px; width=100px;><span class="desc">Berry Bomb&#0153;</span>
	  <br /><br /><br /><br /><br /><br />
	 &nbsp;&nbsp;<img class="im" src="cran.jpg" height=100px; width=100px;><span class="desc">Crushing Cranberry&#0153;</span>
	  <br /><br /><br /><br /><br /><br />
	 &nbsp;&nbsp;<img class="im" src="mon.jpg" height=100px; width=100px;><span class="desc">Monkey Punch&#0153;</span>
</div>


<div id="footer">
<a style="color: black;" href="http://tny.cz/6e848651">Copyright &copy; 2014 Jumpin Juice Inc.</a>
</div>
</div>

CSS

body {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
}
div {

}
#header{
	border-color: lightblue; border-style:solid; border-width:1px;
	background-color: lightblue;
	clear: both;
	width: 100%;
	text-align: center;
}
.im{
	margin-left: 10px;
   float:left;
}
#nav{
	font-size: 24px;
	border-color: #33CC00; border-style:solid; border-width:1px;
	background-color: #33CC00;
	clear: both;
	width: 100%;
	height: 10%;
}

li {
	list-style-type: none;
	display: inline;
}

ul {
	text-align: center;
}
.desc {
	vertical-align:top;
	text-align: center;
	font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
}
a {
	text-decoration: none;
	color: white;
	}
a:hover {
    text-decoration: underline;
	color: white;
}
h4 {
	font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
	font-size: 20px;
	text-align: center;
}
#left-sidebar {
	display:inline-block;
	border-color: #FF9999; border-style:solid; border-width:1px;
	background-color: #FF9999;
	width: 20%;
}
#footer {
		background-color: red;
		color: black;
		margin-bottom: 0px;
		vertical-align:middle;
		height: 40px;
		font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
		font-size: 15px;
}