JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html lang="en">

<head>
<meta charset="UTF-8">
<title> SocialAdventuring.com </title>
<link href="CSS/socialpolarities.css" rel="stylesheet" type="text/css" />
</head>

<body>

<header>
		<h1> Lifestyle Design, Personal Exploration & Dating </h1>
	</header>

<div class="wrapper">

	<nav class="mainnav">
    	<div class="navtext">
		<a href="index.html"> HOME </a> <br/>
		<a href="aboutUs.html"> ABOUT US </a> <br/>
		<a href="contact.html"> CONTACT US </a> <br/>
		<a href="coaching.html"> COACHING </a> <br/>
		<a href="seminars.html"> SEMINARS </a> <br/>
		<a href="blog.html">  BLOG </a> <br/>
        </div>
	</nav>
    
<article class="contact">
	<p> If you have any questions about Social Adventuring, our products, our servives or are interested in collaborating with us please contact us at <a href="mailto:info@socialadventuring.com" style="font-size: inherit;"> info@socialadventuring.com </a>.
    </p>
    
 </article>
 
 </div>
 
 </body>
 
 </html>

CSS

@media (min-width: 1260px) {


header { font-family: 'sofia_pro_lightregular'; color: white; border-bottom: solid white 4px; opacity:0.6; }
body {
	background-color: #CECDB3;
	padding: 5px;
	margin: 2px;
}

.wrapper {
	font-family:Verdana, Geneva, sans-serif; }
.mainnav { border: solid black 4px; width: 200px;; height: 250px; float: left; background-color: #FF0; margin-right: 5px; margin-bottom: 5px; position:fixed; align: left;
 }
 .navtext { padding-left: 10px; padding-top:15px; }
article { background-size:countain; }

.livecoaching { position: relative; right: -20%; }
.seminars { border: solid white 5px; border-top: none; padding: 5px; background-color: #C6C670; }
.aboutus { border: solid white 5px; border-top: none; padding: 5px; background-color: #C6C670;}
.contact { border: solid white 5px; border-top: none; padding: 5px; background-color: #C6C670; }
.blog { border: solid white 5px; border-top: none; padding: 5px; background-color: #C6C670; }

.rightcontent {
	float: right;
	width: 40%;
	position: relative;
	right: -150px;
	background-color: #6A6A00;
	-moz-border-radius-topright: 20px;
	-webkit-border-radius-topright: 20px;
	border-top-right-radius: 20px;
}
.leftcontent { float:left; width: 60%; position: relative; bottom: -1em; }


.clubphoto {opacity:0.4; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px;}

.coachingintro { position: relative; right: 0.2em; font-family: 'CaviarDreamsRegular'; font-size:1.5em; text-align:center; font-weight: 400; }
form {
	background: url(images/nightclub.png) no-repeat;
	background-size: cover;
	font-size: 0.8em;
	font-family: Verdana, Geneva, sans-serif;
	-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
	overflow: auto;
	position: relative;
}



h3:first-letter { font-family: 'KaushanScriptRegular'; font-size: 50px; }
h3 { font-family: 'sofia_pro_lightregular'; }


 
 article { width: 800px; position: relative; right: -220px; padding-top: 3px; font-family:Helvetica; }
...