JSFiddle - React, Tailwind, and code Playground

by isherwood

HTML

<div class="footer-container clearfix">
      <form action="" method="POST" id="ContactForm" class="contact-form-container clearfix">
      <input id="Name" class="name" name="name" placeholder="Name" type="text"></input>
      <input id="Email" class="email" name="email" placeholder="Email" type="text"></input>
      <textarea id="Message" class="message" name="message" placeholder="Message"></textarea>
      <button type="submit" id="Submit" class="submit">Send</button>
    </form>      
    <div class="contact-information">
        <p class="headquarters">Headquarters</p>    
        <p>57507 RR#215</p>
        <p>Box 311</p>
        <p>Redwater, Alberta, T0A 2W0</p>
        <p>Canada</p>
        <p>(780) 942-2994</p>
    </div>
    <p class="copyright">COPYRIGHT © R&amp;F MILLWORKS 2015</p>     
  </div>

CSS

.contact-form-container {
    vertical-align: top;
}
.footer-container {
  position: relative;
  z-index: 36;
  width: 100%;
  min-height: 400px;    
  background-color: #f4f9f8;
  text-align: center;    
}

.contact-form-container {
  margin: 20px;    
  width: 300px;
  height: 400px;    
  text-align: center;
  display: inline-block;
  border: 5px;
  border-style: solid;
  border-color: aqua;      
}

.name {
  width: 228px;
  height: 34px;
  margin: 20px;    
  border-bottom: 2px solid rgb(0, 0, 0);
  background-color: #f4f9f8;
  font-size: 0.929em;
  font-weight: 400;
  line-height: 1.38;
  color: #000000;   
}

.email {
  width: 228px;
  height: 34px;
  margin: 20px;
  border-bottom: 2px solid rgb(0, 0, 0);
  background-color: #f4f9f8;
  font-size: 0.929em;
  font-weight: 400;
  line-height: 1.38;
  color: #000000;    
}

.message {
  width: 228px;
  height: 135px;
  margin: 20px;
  border-width: 1px 1px 2px;
  border-color: rgb(119, 119, 119) rgb(119, 119, 119) rgb(0, 0, 0);
  border-style: solid;
  background-color: #f4f9f8;
  font-size: 0.929em;
  font-weight: 400;
  line-height: 1.38;
  color: #000000;
  white-space: normal;
  resize: none;    
}

.submit {
  width: 117px;
  height: 34px;
  margin: 20px;
  border: 2px solid rgb(0, 0, 0);
  border-radius: 3px;
  background-color: #f4f9f8;
  font-size: 1.143em;
  font-weight: 400;
  line-height: 1.38;
  text-align: center;
  color: rgb(0, 0, 0);   
}

.contact-information { 
  margin: 20px;    
  width: 300px;
  height: 400px; 
  font-size: 1.143em;
  font-weight: 400;
  text-align: center;
  display: inline-block;    
  color: rgb(0, 0, 0);
  border: 5px;
  border-style: solid;
  border-color: aqua; 
}

.headquarters {
  height: 30px;    
  font-size: 25px;
  font-weight: 700;
  line-height: 1.38;
  text-align: center;
  color: rgb(0, 0, 0);    
}

.copyright {
  width: 60%;
  height: 22px;
  margin: 20px auto;
  font-size: 1.143em;
  font-weight: 400;
  line-height: 1.38;
  text-align: center;
  color:...