JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>

<html lang="en">

<head>
<meta charset="utf-8" />
<meta name="description" content="Community Martial Arts Center" />
<meta name="keywords" content="Community Martial Arts Center" />
<title>Community Martial Arts Center</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script
<![endif]-->
</head>

<body>

<div id="wrapper">

<div id="copy_container">

<header>

<div id="schedule">
Schedule
</div>

<div id="phone_number"><a href="tel:415-373-7375">(415) 373-7375</a></div>
<h1><img src="images/communitymartialartscenter.png" width="580px; alt="Community Martial Arts Center"></h1>
</header><!-- HEADER -->

<div id="copy_left">
<iframe width="550" height="300" src="http://www.youtube.com/embed/xWL9GDRyNPA" frameborder="0" allowfullscreen></iframe>
</div>

<div id ="copy_right">
<div class="form">
<h2>FREE Martial Arts Class</h2>
<h3>Fill in the form below now, and we'll call you to setup your FREE Martial Arts Class...</h3>
<p id="feedback"><?php echo $feedback; ?></p>
<form action="contact.php" method="post">
<p class="name">
<input type="text" name="name" id="name" style="text-align:center;" onClick="this.value='';" value="Enter your name"/>
</p>
<p class="phone">  
<input type="text" name="phone" id="phone" style="text-align:center;" onClick="this.value='';" value="Enter your phone #"/>
</p>
<p class="submit">
<input type="submit" value="Get FREE Class"/>
</p>
</div><!-- FORM -->
</div>

<div id="review">
<p>"A friend of mine recommended that I try martial arts, so I thought I'd give it a go. I didn't know what I would be getting myself into, but turns out it is a great workout, and it's lots of fun. Community Martial Arts Center is amazing - highly recommended!" <font...

CSS

body {
background-color: #DED7DA;
font-family: Arial;
margin: 0;
padding: 0;
}

#wrapper {
width: 960px;
margin: 0 auto;
}

header {
width: 100%;
height: 100px;
margin: 0;
padding: 0;
padding-top: 20px;
background-color: #990100;
border: none;
border-bottom: 1px solid black;
border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
}

header h1 {
margin: 10px 0 0 15px;
padding: 0;
float: left;
}

#phone_number {
font-size: 20px;
font-weight: bold;
color: #FFF;
width: 170px;
height: 35px;
margin: 15px 10px 0 0;
padding: 15px 0 0 0;
border: 2px solid #CCC;
background-color: #990100;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
float: right;
text-align: center;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 3px 10px;
-moz-box-shadow: rgba(0,0,0,0.3) 0 3px 10px;
box-shadow: rgba(0, 0, 0, 0.3) 0 3px 10px;
}

#phone_number a:link {
text-decoration: none;
color: #FFF;
}

#schedule {
font-size: 20px;
font-weight: bold;
color: #FFF;
width: 125px;
height: 35px;
margin: 15px 32px 0 0;
padding: 15px 0 0 0;
border: 2px solid #CCC;
background-color: #990100;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
float: right;
text-align: center;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 3px 10px;
-moz-box-shadow: rgba(0,0,0,0.3) 0 3px 10px;
box-shadow: rgba(0, 0, 0, 0.3) 0 3px 10px;
}

#schedule a:link {
text-decoration: none;
color: #FFF;
}

input, textarea {
padding: 10px;
border: solid 1px #000;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 250px;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
border-width: 1px;
border-color: #EBC47B;
border-radius: 2px;
}

.submit input {
width: 273px;
padding: 15px 15px;
background: #990100;
border: 0;
font-size: 20px;
font-weight: bold;
color: #FFF;
border: 2px solid black;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 3px 10px;
-moz-box-shadow:...