JSFiddle - React, Tailwind, and code Playground

HTML

<!-- 
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr" >
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Acquire Media, digital media,Dow Jones, PR Newswire, Business Wire,New York Times Syndicate, McClatchy Interactive, McClatchy Tribune, CanWest, Canada NewsWire, Briefing.com, The Press Association, Market News International, Tribune Media, United Features,The Washington Post News Service,inbound content management services,financial and information services, news press, news release,news articles a day" />
<meta name="robots" content="index, follow" />
<meta name="description" content="We are an advanced technology company devoted to delivering text news and multimedia with guaranteed reliability in formats that make content instantly usable and searchable. We serve the news, digital publishing and financial services communities, which depend on the speed of our delivery service, our reliability, our 24x7 support, plus our ability to handle multiple formats and delivery options." />

<base href="C:\Users\Josh Stewart\Documents\Websites\New_AM_Website\"></base>

<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
<link href="favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
</head>
-->

<body>
<div id="wrapper">

<!-- Header -->
<div id="header">
<div class="container">
<a href="#"><img src="images/acquire-media.png" alt="Acquire Media"></a>
<span id="email"><a href="mailto:info@acquiremedia.com" title="Click here to email us" class="mail_button"><i class="fa fa-envelope-o fa-2x"></i>&nbsp;info@acquiremedia.com</a></span>
</div>

<div class="menu">
<nav role="navigation">
<ul>
   <li id="active"><a...

CSS

@charset "UTF-8";

/*---------- General Styles ----------*/
html,
body {
	margin:0;
	padding:0;
	height:100%;
	font-family : arial, sans-serif;
	font-size : 14px;
}

#wrapper {
	min-height:100%;
	position:relative;
}

#header {
	padding-bottom : 10px;
	margin : 0;
	padding : 0;
}

#body {
	padding-bottom : 4%; /* Height of the footer element */
}

#footer {
	background : #000000;
	width : 100%;
	height : 4%;
	position : absolute;
	bottom : 0;
	left : 0;
	right : 0;
	padding : 0;
	margin : 0;
}

#email {
	float : right;
	
}

h2 {
	text-decoration : strong;
	font-style : italic;
	text-align : center;
	color : #70B51E;
}

.caption {
border : dotted;
position : relative;
margin-top : 150px;
}

.caption-title {
    color: #625bc4;
    font-size: 24px;
	font-weight: bold;
	font-family: arial, helvetica, sans-serif;
}

.caption-tm {
    color: #625bc4;
    font-size: 8px;
	vertical-align: super;
	font-weight: bold;
	font-family: arial, helvetica, sans-serif;
}

.caption-text {

    font-size: 16px;
	font-family: arial, helvetica, sans-serif;
}

/*---------- Containers ----------*/
.menu {
width : 1200px;
height : auto;
clear : both;
position: relative;
margin : 0px auto;
border : dotted;
}

.container {
width : 1200px;
height : auto;
margin : 0px auto;
position : relative;
clear : both;
border : dotted;
}

.picture_container {
	border : dotted;
	height : 600px;
}

.picture_container img {
	width : 500px;
	float : left;
	height : auto;
}

/*------------------ Footer ------------------*/
#footer-upper {
background : #71B51E;
height : 10%;
}

#footer-inner {
font-size : 14px;
color : #FFFFFF;
text-decoration : none;
width : 1200px;
margin : 0 auto;
clear : both;
background : #000000;
border : dotted;
}

#footer-inner a:link {
color : #FFFFFF;
}

#footer-inner a:visited {
text-decoration : none;
color : #FFFFFF;
}

#footer-inner a:hover {
color : #71B51E;
}

#footer-inner a:active {
color : #625BC4;
}

/*------------------ Buttons ------------------*/
.green_button {
border...