JSFiddle - React, Tailwind, and code Playground

by Graham Walters

HTML

<form id="contact_form">
  <input type="text" name="name" id="name" placeholder="Name" />
  <input type="text" name="email" id="email" placeholder="Email" />
  <input type="text" name="subject" id="subject" placeholder="Subject" />
  <textarea name="message" id="message" placeholder="Message"></textarea>
  <input type="submit" id="send" value="Send" />
</form>

CSS

#contact_form {
  background: rgb(51, 55, 69);
  margin: 40px auto 0 auto;
  width: 430px;
  border-radius: 20px;
  padding: 10px;
}

input, textarea {
  display: block;
  background-color: #fff;
  font-family: sans-serif;
  font-size: .8em;
  padding: 0px;
  width: 418px;
  height: 35px;
  margin: 15px auto 0 auto;
}

input {
  text-align: center;
}

textarea {
  height: 125px;
  padding: 10px;
  width: 400px;
  -webkit-resize: none;
  -moz-resize: none;
  resize: none;
}

input:focus, textarea:focus {
  background: #fff !important;
}

::-webkit-input-placeholder {
  color: #000;
  text-align: center;
  text-transform: uppercase;
}
:-moz-placeholder {
  color: #000;
  text-align: center;
  text-transform: uppercase;
}
::-moz-placeholder {
  color: #000;
  text-align: center;
  text-transform: uppercase;
}
:-ms-input-placeholder {
  color: #000;
  text-align: center;
  text-transform: uppercase;
}

#send {
  margin: 20px;
  padding: 10px;
  width: 100px;
  border-radius: 15px;
  background: #0af;
  border: #a0a0a0;
}