JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<!--This HTML5 document was created by Gareth Bailey-->
<!--The images on this page page are free to use credits are given too-->
<html>
<head>
<title>A Modern World</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<div id="wrapper">
<header id="banner">
<img src="banner3.png" alt="Modern World" width="960" height="150">
</header>
<nav id="navigation">
<ul>
<li class="navigation"><a href="#">Home</a></li>
<li class="navigation"><a href="#">History</a></li>
<li class="navigation"><a href="#">About</a></li>
<li class="navigation"><a href="#">Products</a></li>
<li class="navigation"><a href="#">Jobs</a></li>
<li class="navigatiom"><a href="#">Contact</a></li>
</ul>
</nav>
<section id="main">
<h3>Welcome to a Modern World</h3>
<p>This site was created for all your mod needs weither you want to keep on top of the mod culture music, fashion and scooters or you are a new comer and want to just find out.</p>
<br>
<hr>
<article>
<h3>Paul Weller announces UK tour for 2015</h3>
<div class="image">
<img src="weller.jpg" alt="myimage" width="150" height="150">
</div>
<p>Mod music icon Paul Weller has announced he will be touring Uk in spring 2015 his words were "I will be only be performing in towns and cities often missed", His 14 date show will kick off on 5 March at the Plymouth Pavillions before heading to Swindon, Watford, Stoke-On-Trent, Halifax and more - no London date has been announced Kepp an eye out on this page for more information.</p>
</article>
<hr>
<article>
<h3>Rock legend Joe Cocker dies from lung cancer </h3>
<div class="image">
<img src="cocker.jpg" alt="myimage" width="150" height="150">
</div>
<p>We must say a sad goodbye to the british vocalist Joe cocker who died on December 22nd age of 70 and had been battling with lung cancer, He was not just an amazing performer but also one of the most distinctive and inspiring rock artists of the 60s and 70s show your appreciation and visit his site by...

CSS

body {
background-image: url(vespablue.jpg);
}

#wrapper {
width: 960px;
margin: 1% auto;
padding-bottom: 1em;
height: auto;
background-color: white;
border: 2px solid black;
box-shadow: 0px 0px 15px 1px black;
}

/*start of navigation*/
#navigation {
border-bottom: 1px solid #333;
width: 960px;
}

#navigation ul {
margin: 0; 
padding: 0; 
overflow:hidden;
}

#navigation ul li {
float: left; 
border-right: 1px solid #333;
list-style-type: none;
}

#navigation ul li a {
display: block; 
padding: 0.4em 1.5em;
font-family: Verdana, Arial, sans-serif;
}

#navigation a:link {
color: #333;
text-decoration: none;
}

#navigation a:visited {
color: #006600;
text-decoration: none;
}

#navigation a:hover {
color: #ff0000;
text-decoration: none;
}
/*end of navigation*/

#main {
width: 960px;
height: auto;
}

#main h3 {
margin: 1em 1em 1em 1em;
}

h3 {
font-family: Verdana, Arial, sans-serif; 
}

p {
font-family: Verdana, Arial, sans-serif;
margin: 0 1em 1em 1.3em;
}

hr {
width: 850px;
background: #333;
}

article {
float: left;
width: auto;
height: auto;
margin: 0em 1em 1em 1em;
padding: 0em 0em 0em 0em;
}

article h3 {
margin: 1em 1em 1em 0em;
}

div.image {
float: left;
margin: 0 0.5em 1em 1em;
}

article p {
font-family: Verdana, Arial, sans-serif;
margin: 0 1em 1em 0;
}

img {
display: block;
padding: 0;
margin: 0;
border: 0;
}

/*start of link style*/
a:link {
color: #0000ff;
text-decoration: none;
}

a:visited {
color: #006600;
text-decoration: none;
}

a:hover {
color: #ff0000;
text-decoration: underline;
}
/*end of link style*/

footer {
margin: 0px;
text-align: center;
font-family: Verdana, Arial, sans-serif;
}