JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="font-awesome.css">
<form action="">
	<div class="container" id="container">
		<label>First Name
		  <input id="first_name" maxlength="40" name="first_name" size="20" type="text"><i class="fa fa-check-circle" aria-hidden="true"></i>
		</label>
		<label>Last Name
		  <input id="last_name" maxlength="80" name="last_name" size="20" type="text">
		</label>
		<label>Email
		  <input id="email" maxlength="80" name="email" size="20" type="text"><i class="fa fa-times-circle-o" aria-hidden="true"></i>
<!-- 			<span class="msg error">Wrong email!</span>
			<span class="msg success">Correct email!</span> -->
		</label>
		<label>Phone
		  <input id="phone" maxlength="40" name="phone" size="20" type="text">
		</label>
		<label>City
		  <input id="city" name="city" maxlength="40" size="20" type="text">
		</label>
		<label>State/Province 
		  	<input id="state" maxlength="20" name="state" size="20" type="text">
		</label>
		<label id="company">Company
		  <input id="company" name="company" type="text">
		</label>
		<label>Comments 
		  <textarea name="" id="" cols="30" rows="10"></textarea>
		 <button type="submit" name="submit">SUBMIT</button>
		</label>
	</div>
</form>

CSS

body {
  color: #fff;
  background-color: #f78e2a;
  text-align: center;
}

form {
  color: #fff;
  background-color: #f78e2a;
  text-align: center;
  font-family: Lato;
}

* {
  box-sizing: border-box;
}

h1 {
  font-size: 20px;
  text-align: center;
}


input[type="text"] {
    width: 100%;
    padding: 10px;
    background-color: #f9a558;
    border: 1px solid #fff;
}

input[type="text"]:focus {
    background-color: #fff;
}

input[type="text"]:visited {
    background-color: #fff;
}
.container {
  display: flex;
  flex-direction: column;
  padding: 5px 0;
  margin-left: 10%;
  margin-right: 10%;
}

textarea {
  width:100%;
  background-color: #f9a558;
  border: 1px solid #fff;
}

textarea:focus {
  background-color: #fff;
}

#company {
  flex-basis: 100%;
  max-width: 100%;
}

label:nth-last-child(-n+2)
{
  flex-basis: 100%;
  max-width: 100%;
}


select, label {
    height: 50px;
    width: 48%;
    margin: 2% 1%;
    text-align: left;
}


button {
  margin-top: 10px;
  background-color: #B9B9B9;;
  color: #959595;
  border-radius: 6px;
  width: 120px;
  height: 35px;
  margin-left: 1%;
  display: block;
}

.fa fa-check-circle {
  color: green;
}

button:focus{
  background-color: #fff;
  color: #f78e2a;
}




@media (max-width: 426px) {
  label {
    width: 98%;
  }
  
}

@media (min-width: 426px) {
  .container {
    flex-direction: row;
    flex-wrap: wrap;
    align-self: flex-start;
  }

  
}