JSFiddle - React, Tailwind, and code Playground

HTML

<table width="100%" id="p3" cellpadding="0" cellspacing="0">
    <tr>
	  <td width="100%" colspan="3" align="center"><h3>Where would you like us to send your brochure and DVD?</h3>
	  </td>
	</tr>
	<tr>
	  <td width="25%"></td>
	  <td width="50%">
	    <form class="contactForm" method="post" action="send.php">
          <div>
            <input name="fname" type="text"  placeholder="First Name"id="fname" required>
			<input name="lname" type="text"  placeholder="Last Name"id="lname" required><br>
			<input name="address" type="text"  placeholder="Address"id="address" required>
			<input name="city" type="text"  placeholder="City" id="city" required>
			<input name="state" type="text"  placeholder="State" id="state" maxlength="2" onkeyup="this.value = this.value.replace(/[^A-z]/, '')"  required>
			<input name="zip" type="text"  placeholder="Zip Code" id="zip" onkeyup="this.value = this.value.replace(/[^0-9]/, '')" maxlength="2" required>
			<input name="phone" type="tel"  placeholder="Phone" id="phone" required>
			<input class="btn submitBtn" id="send" value="Send It!" type="submit">
			<p class="privacy">Privacy Policy</p>
          </div>
		</form>
	  </td>
	  <td width="25%"></td>
	</tr>
  </form>
  </table>

CSS

:before, :after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

p, li {
  letter-spacing:-0.05vw;
}
h1 {
 letter-spacing:-0.3vw;
}

#p3 {
  background-color:white;
}

table {
  border:0;
  padding:0;
  border-collapse:collapse;
 }

div {
 
  float:left;
}

.btn {
 font-family:Oswald-RegularItalic;
  font-size:1.2vw;
  width:25%;
  display:block;
	float:left;
	margin-left:2%;
	background-color:#00A151;
	height:2.5vw;
	border: 0 none;
	color:white;
	margin-bottom:10%;
	
} 

#p3 h3 {
  color:#00A151;
  font-size:2vw;
  font-family:Oswald-RegularItalic;
  margin:10% 0 5% 0;
  padding:0;
}

#p3 div {
 margin:0;
}
#fname, #lname, #address, #city, #state , #zip, #phone{
  height:35px;
	line-height:35px;
	font-size:20px;
	border: 1px solid #1B75B7;
}

#fname, #lname, #address, #city, #state {
  margin-bottom:3px;
}
#fname {
 margin-right:4px;}

#fname, #lname{
	float:left;
	display:inline-block;
	white-space:nowrap;
	width:48%;
}

#address {
  width:97%;
}

#city {
  width:86%;
}
#state {
  width:10%;
}
#zip, #phone {
  margin-bottom:20px;
}
#zip {
  width:40%;
}
#phone {
  width:56%;
}

#p3 input::-webkit-input-placeholder { /* WebKit browsers */
    font-size:1.2vw;
	color:#1B75B7;
	font-family:Oswald-BoldItalic;
	padding-left:25px;
}
#p3 input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    font-size:1.2vw;
	color:#1B75B7;
	font-family:Oswald-BoldItalic;
	padding-left:25px;
}
#p3 input::-moz-placeholder { /* Mozilla Firefox 19+ */
    font-size:1.2vw;
	color:#1B75B7;
	font-family:Oswald-BoldItalic;
	padding-left:25px;
}
#p3 input:-ms-input-placeholder { /* Internet Explorer 10+ */
    font-size:1.2vw;
	color:#1B75B7;
	font-family:Oswald-BoldItalic;
	padding-left:25px;
}
#p3 #state::-webkit-input-placeholder { /* WebKit browsers */
    font-size:1.2vw;
	color:#1B75B7;
	font-family:Oswald-BoldItalic;
	padding-left:0;
}
#p3  #state:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  ...