JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<script src="fonts.googleapis.com/css?family=Lato:100,300,400"></script>
<div class="content">
     <form id="form" class="topBefore" action="php/contact.php" method="post">
          <input id="name" class="clearable" type="text" name="name" placeholder="NAME">
          <input id="email" class="clearable" type="text" name="email" placeholder="E-MAIL">
          <textarea id="message" class="clearable" type="text" name="text" placeholder="NACHRICHT"></textarea>
        <input id="submit" class="clearable" name="submit" type="submit" value="SENDEN">
    </form>
</div>

CSS

textarea,input {box-sizing:border-box;}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #aca49c;
  font-size: 0.875em;
}
 
body {
  background: #e2dedb;
}
 
input {
  font-family: 'Lato', sans-serif;
  font-size: 0.875em;
  width: 100%;
  height: 50px;
  padding: 0px 15px 0px 15px;
 
  background: transparent;
  color: #726659;
 
  border: solid 1px #000;
  border-bottom: none;
 
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}
 
textarea {
  width: 100%;
  height: 110px;
  max-height: 110px;
  padding: 15px;
 
  background: transparent;
  outline: none;
 
  color: #726659;
  font-family: 'Lato', sans-serif;
  font-size: 0.875em;
 
  border: solid 1px #000;
 
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}
 
#submit {
  padding: 15px;
  margin: -5px 0px 0px 0px;
  font-family: 'Lato', sans-serif;
  font-size: 0.875em;
  color: #b3aca7;
  outline:none;
  cursor: pointer;
  border: solid 1px #000;
  border-top: none;
}
 
#submit:hover {
    color: grey;
    background-color: whitesmoke;
}