JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <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 and Clubs |</a></li>
                  <li><a href="#">Transport</a></li>
            	</ul>
        	</div>
        </div>
        
        <div id="banner"></div>
        
        <div id="footer">
        	<p>Placeholder</p>
        </div>
        
	</div>
</body>

CSS

body {
			width: 100%;
      margin: 0px;
      background-color: #F5F5F5;
    }
    
    #banner{
          box-sizing: border-box;
      line-height: 0;
      height: calc(100vh - 133px);
      background-image: url('http://i.imgur.com/VsIRZNZ.jpg');
    }
		
		#container {
			height: 100%;
      width: 100%;
		}

		#navigation{
		      box-sizing: border-box;
  			color: white;
  			background-color: #292526;
			width: 100%;
  		
  			top: 0px;
			padding: 0.5% 0.5%;
		}
		
		#navigationLeft {
  			width: 24.5%;
  			display: inline-block;
  			vertical-align: middle;
  			font-size: 180%;
		}

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

		#navigation a {
  			font-size: 120%;
  			color: white;
  			text-decoration: none;
		}
		
		#footer{
		      box-sizing: border-box;
  		color: white;
  		background-color: #292526;
			width: 100%;
			padding: 0.5% 0.5%;
		}