JSFiddle - React, Tailwind, and code Playground

by cvalleskey

HTML

<fieldset>
  <legend>Sign up</legend>

  <div class="field-group">
    <div class="field">
      <input id="first" type="text" placeholder="John Smith"/>
      <label for="first">First</label>
    </div>

    <div class="field">
      <input id="last" type="text" placeholder="Surname"/>
      <label for="last">Last</label>
    </div>
  </div>
  
  <div class="field">
    <textarea id="textarea" placeholder="Long form text here..." col="40" row="4"></textarea>
    <label for="textarea">First</label>
  </div>
  
  <div class="field">
    <select id="dropdown">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    <label for="dropdown">Label</label>
  </div>

  <div class="field">
    <input id="last" type="email" placeholder="[email protected]"/>
    <label for="last">Email</label>
  </div>

</fieldset>

CSS

select {
  height: 100%;
}

.field-group {
  display: flex;
}

.field-group > .field {
  flex: 1;
  margin-left: 1rem;
}
.field-group > .field:first-child {
  margin-left: 0;
}

.field {
  display: flex;
  width: 100%;
  position: relative;
}

.field > label {
  display: block;
  position: relative;
}
.field > label {
  position: absolute;
  left: 0;
  top: 0;
  cursor: text;
  font-size: 75%;
  opacity: 1;
  -webkit-transition: all .2s;
          transition: all .2s;
}
.field > select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.field > textarea {
  width: 100%;
}
.field > input, .field > select, .field > textarea {
  font-size: inherit;
  padding-top: 1em;
  margin-bottom: 2px;
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  width: 100%;
}
.field > input::-webkit-input-placeholder, .field > select::-webkit-input-placeholder, .has-float-label textarea::-webkit-input-placeholder {
  opacity: 1;
  -webkit-transition: all .2s;
          transition: all .2s;
}
.field > input::-moz-placeholder, .field > select::-moz-placeholder, .has-float-label textarea::-moz-placeholder {
  opacity: 1;
  transition: all .2s;
}
.field > input:-ms-input-placeholder, .field > select:-ms-input-placeholder, .has-float-label textarea:-ms-input-placeholder {
  opacity: 1;
  transition: all .2s;
}
.field > input::placeholder, .field > select::placeholder, .field > textarea::placeholder {
  opacity: 1;
  -webkit-transition: all .2s;
          transition: all .2s;
}
.field > input:placeholder-shown:not(:focus)::-webkit-input-placeholder, .field > select:placeholder-shown:not(:focus)::-webkit-input-placeholder, .field > textarea:placeholder-shown:not(:focus)::-webkit-input-placeholder {
  opacity: 0;
}
.field > input:placeholder-shown:not(:focus)::-moz-placeholder, .field > select:placeholder-shown:not(:focus)::-moz-placeholder, .field > textarea:placeholder-shown:not(:focus)::-moz-placeholder {
  opacity: 0;
}
.field >...