JSFiddle - React, Tailwind, and code Playground

HTML

<form id="contact-form">
  <p>
    <label for="name">
      Name:
      <input type="text" id="name" name="name" placeholder="Ihr Name">
    </label>
    <label for="email">
      E-Mail:
    <input type="email" id="email" name="email" placeholder="[email protected]">
    </label>
  </p>
  <p>
    <label>
      Betreff:
    <input type="text" name="betreff" placeholder="Mein Anliegen">
    </label>
  </p>
  <p>
    <label for="nachricht">
      Nachricht:
    </label>
    <textarea id="nachricht" name="nachricht" placeholder="Ihre Nachricht an uns"></textarea>
    <button>Nachricht abschicken</button>
  </p>
</form>

CSS

#contact-form {
  background: #ddd;
  padding: 1em 2em;
}

#contact-form label {
  border-bottom: 1px solid black;
  display: block;
  width: auto;
}

#contact-form input {
  background: transparent;
  border: none;
  font-family: inherit;
}

#contact-form [for="name"],
#contact-form [for="email"] {
  display: inline-block;
  width: 49%;
}

#contact-form [name="name"],
#contact-form [name="email"] {
  width: 71%;
}

#contact-form textarea {
  border: none;
  display: block;
  font-family: inherit;
  height: 6em;
  padding: 0.5em 1em;
  width: calc(100% - 2em);
}

#contact-form button {
  border: none;
  border-bottom: 1px solid black;
  cursor: pointer;
}

#contact-form button:before {
  content: "<";
}

#contact-form button:after {
  content: ">";
}