JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    
		<div id="navigation">
        	<div id="navigationLeft">
				<a href="#">Visit Clare Ireland</a>
            </div><!--
            
			--><div id="navigationRight">
				<ul>    
					<li><a href="#">Home |</a></li>
					<li><a href="#">Maps |</a></li>
					<li><a href="#">Hotels |</a></li>
					<li><a href="#">Appartments |</a></li>
					<li><a href="#">Attractions |</a></li>
					<li><a href="#">Essentials |</a></li>
					<li><a href="#">Bars & Clubs |</a></li>
					<li><a href="#">Transport</a></li>
            	</ul>
        	</div>
      </div>
        
        <div id="banner">
			<img src="http://i.imgur.com/VsIRZNZ.jpg" alt="The Cliffs of Moher" id="cliffPic"/> 
        </div>
        
      <div id="footer">
        	<p>Placeholder Text</p>
        </div>
        
	</div>

CSS

body,td,th {
			font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
		}
		
		body {
			wdith: 100%;
			height: 100%;
			margin: 0px;
    	}
		
		#container {
			wdith: 100%;
			height: 100%;
		}

		#navigation {
  			color: white;
  			background-color: #292526;
			width: 99%;
			padding: 0.5% 0.5%;
		}
		
		#navigationLeft {
  			width: 24.5%;
  			display: inline-block;
  			vertical-align: middle;
  			font-size: 150%;
		}

		#navigationRight {
  			width: 74.5%;
  			display: inline-block;
  			vertical-align: middle;
		}
		
		#navigation ul {
  			float: right;
		}
		
		#navigation ul li {
  			display: inline;
		}

		#navigation a {
  			font-size: 100%;
  			color: white;
  			text-decoration: none;
		}	
		
		#banner {
			line-height: 0;
			height: 70%;
		}
		
		#cliffPic {
			width: 100%;
			height: 70%;
		}
		
		#footer {
  			color: white;
  			background-color: #181818 ;
			width: 99%;
			padding: 0.5% 0.5%;
			text-align: center;
		}