JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en"> 
	<head>
		<meta charset="utf-8"/>
		<title> My Green Energy Home Page </title>
		<link rel="stylesheet" type="text/css" href='http://fonts.googleapis.com/css?family=Signika:400,600'>
		<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" media="only screen and (min-width: 1000px)" href="css/desktop.css"/>
		<link rel="stylesheet" type="text/css" media="only screen and (min-width: 500px) and (max-width: 999px)" href="css/tablet.css">
		<link rel="stylesheet" type="text/css" media="handheld, only screen and (max-width: 499px), only screen and (max-device-width: 499px)" href="css/mobile.css"/>
	</head>
<body>
<header class="MainHeader">
	<img src="images/webheader.jpg" alt="Green energy header of grass and lightbulb" class="header-image"/>
	<img src="images/greenenergy.png" alt="Green energy logo" width="25%" height="25%" class="logo"/>
	<h1 class="headertext"> My Green Energy</h1>

<nav>
	<label for="show-menu" class="show-menu">Show Menu</label>
	<input type="checkbox" id="show-menu" role="button">
	<ul id="menu">
		<li class="active"><a href="#">Home</a></li>
		<li><a href="#">My Metre</a></li>
		<li><a href="#">Customer Help</a></li>
		<li><a href="#">Social Media</a></li>
	</ul>
</nav>
</header>

CSS

body{
	max-width: 1200px;
    margin: 0 auto;
    width: 70%;
    clear: both;
    height: 100%;
    background-color: #DCDCDC;
    padding-top: 30px ; 
    margin: 0 auto;
    padding-top: 30px ; 
    font-family: 'PT Sans', sans-serif;
    font-size: 100%;
    text-align: left;
    line-height: 1.5;
    padding: 2%;
    border-radius: 10px;
    box-shadow: #0AF73A 0px 0px 50px;}

.header {
	width: 100%;
}
	
.MainHeader {
    background-color: #71B315;
	background: url("http://critterbabies.com/wp-content/gallery/kittens/happy-kitten-kittens-5890512-1600-1200.jpg");
    /* clearfix */
    overflow: auto;
	margin-top: 2% 0;}

.MainHeader nav {
	background-color: #2f3036;
	height: 60px;
	border-radius: 5px;
	margin-right: 10px;
	margin-left: 10px;
	border-radius: 5px;
    -webkit-border-radius: 5px;}

.content {
	margin-bottom: 2%}

.MainHeader {margin-bottom: 2%;}

.MainHeader img {
    width: 20%; 
    height: auto;}

.MainHeader {
    padding-top: 20px;
	padding-bottom: 10px;}
	
.headertext {
    display: inline;}

.logo {
    display: inline;
    vertical-align:middle}

#menu .MainHeader nav a:hover, .MainHeader nav a:active
#menu .MainHeader nav .active a:link, .Mainheader nav .active a:visited {
    background-color: ;
	text-shadow: none;}

.MainHeader nav ul li a {
	border-radius: 5px;
	-webkit-border-radius: 5px;}