JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mainbox">

    <header>
        <div class="titlebar">
            
<div class='pageLogoImg'>
<img src='/images/logo/logo.png' alt='Greenhaven Logo' title='Greenhaven Logo'></div>
<div class='pageLogoImgBalance'></div>            
    <h1 id='top'>Welcome to Green Haven Holidays</h1>

        </div>
        <nav>
            <div id='innerNav'><ul><li>
<a href='http://greentwo.blythweb.co.uk/welcome'
         title='Relaxed holidaying in a peaceful location' >Welcome</a>
</li><li>
<a href='http://greentwo.blythweb.co.uk/holidaycottage'
         title='Self catering cottage for two or three' >Holiday Cottage</a>
</li><li>
<a href='#' aria-haspopup='true'
         title='Camping' >Camping</a>
<ul><li><a href='http://greentwo.blythweb.co.uk/ourcampsite'
         title='Camping and Caravanning at Greenhaven' >Camping</a></li>
<li><a href='http://greentwo.blythweb.co.uk/campsiterates'
         title='Our Charges for the Campsite' >Campsite Prices</a></li>
</ul></li><li>
<a href='http://greentwo.blythweb.co.uk/greenatgreenhaven'
         title='Green @ Greenhaven' >Green @ Greenhaven</a>
</li></ul></div>        </nav>
    </header>

    <main class="contentbox">
         <article><div class='leftSideText'><p>Green Haven is the perfect place to enjoy a low environmental impact holiday in the Suffolk countryside. Situated in the middle of the attractive and friendly village of Rumburgh; we are just 20 minutes from Suffolk’s stunning Heritage coastline, which is an area of outstanding natural beauty; close to the lovely seaside towns of <a  title="Southwold Website" href="http://exploresouthwold.co.uk/" target="_blank" >Southwold </a>and Walberswick and the RSPB nature reserve at Minsmere; in a tranquil, rural setting, surrounded by fields. Also nearby are a number of traditional market towns and picturesque villages and we are within easy reach of Norwich and The Broads.<br></p><h2>A friendly welcome - camping or self catering</h2> <p>At Green Haven Holidays,...

CSS

html, body {
	font-size:16px;
	margin:0;
}
body{
    background: #444727;
}

@media only screen
	and (max-width: 430px ) {

	.pageLogoImgBalance {
		display:none !important;
	}
}
@media only screen
and (max-width : 680px) {
	.mainbox {
		width:100%;
		min-width:320px !important;
		margin:0 !important;
		padding:0 !important;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1em;
	}
	.mainbox h1 {
		font-size: 1.2em;
		line-height: 1.25em;
		margin: 0;
		padding: 0.25em 1px 1px 1px;
	}
	.imgBox500 {
		display: block;
		width:94%;
		margin:auto;
		text-align: center;
	}
	.introBox {
		width:80% !important;
		min-width:280px !important;
		max-width:500px!important;
		margin:0.8em auto !important;
	}
	.leftSideText , .imgSideText{
		padding: 2px 2px 2px 2px;
		display: block;
		width: 100%;
		margin:auto;
	}


}
@media only screen
and (min-width : 681px) and (max-width: 800px)
{
	.mainbox {
		width:99%;
		max-width:1200px !important;
		min-width:622px !important;
		margin:0.4em auto;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1em;
		border: 1px solid #006;
        box-sizing: border-box;
    }
	.mainbox h1 {
		font-size: 1.35em;
		line-height: 1.4em;
		margin: 0;
		padding: 0.25em 2px 2px 2px;
	}
	.imgBox500 {
		display:block;
		width:100%;
		min-width:300px;
		max-width:500px !important;
		margin:auto;
	}
	.introBox {
		width:80% !important;
		margin:0.75em 5% 0.75em 5% !important;
		min-width:280px !important;
		max-width:500px!important;
	}
	.leftSideText {
		padding: 2px 2px 2px 2px;
		display: inline-block;

	}
	.imgSideText {
		padding: 2px 2px 2px 2px;
		display: inline-block;
	}

	.mainbox > main > article {
		display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
		display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
		display: -ms-flexbox;      /* TWEENER - IE 10 */
		display: -webkit-flex;     /* NEW - Chrome */
		display: flex;
		overflow: hidden;
	}
	.mainbox > main > article > .leftSideText,
	.mainbox >...