JSFiddle - React, Tailwind, and code Playground

HTML

<formgroup>
  <input type="text" placeholder="Nome" />
  <label>Nome</label>
</formgroup>

<formgroup>
  <input type="text" placeholder="E-mail" />
  <label>E-mail</label>
</formgroup>

<formgroup>
  <input type="text" placeholder="Endereço" />
  <label>Endereço</label>
</formgroup>

CSS

formgroup {
  display: inline-block;
  width: 100%;
  margin: 0 0 16px;
}

formgroup label {
  float: left;
  background: black;
  color: white;
  padding: 0 24px;
  height: 28px;
  line-height: 28px;
}

formgroup input {
  height: 26px;
  margin: 0;
  outline: none;
  padding: 0 8px;
  border: 1px solid black;
}

input:focus {
  border: 1px solid red;
  box-shadow: none;
}
input:focus + label {
  color: red;
}