JSFiddle - React, Tailwind, and code Playground

by Davide Brognoli

HTML

<form name="submission">
  <fieldset>        
    <label class="label" for="name"> Name: </label>
    <input type="text" name="name" id="name" placeholder="e.g. Davide" title="Your name, required" required>
    <label class="label" for="surname"> Surname: </label>
    <input type="text" name="surname" id="surname" placeholder="e.g. Brognoli" title="Your surname, required" required>
    <label class="label" for="email"> E-mail: </label>
    <input type="email" name="email" id="email" placeholder="e.g. davide.brognoli@codiceplastico.com"
      title="Your email address, a valid email is required" required>     
    <label class="label" for="twitter"> Twitter: </label>
    <input type="text" name="twitter" id="twitter" placeholder="e.g. @davidebrognoli"
      title="Your twitter username, starting with @" required pattern="@[a-zA-Z0-9]+">
    <footer></footer>
  </fieldset>
  <input type="submit" value="Submit">
</form>

CSS

fieldset {
  border: none;
  padding: 0;
}

.label {
    display: block;
}

input:not([type=submit]) {
    display: block;
    width: 350px;
    margin-bottom: 20px;
}