JSFiddle - React, Tailwind, and code Playground

HTML

<label class="overlabel"> 
    <span>First Name</span>
    <input name="first_name" type="text" />
</label>

CSS

.overlabel {
  border: 0.1em solid;
  color: #aaa;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  min-height: 2.2em;
}
/* line 80, ../../sass/_classes.scss */
.overlabel span {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* line 88, ../../sass/_classes.scss */
.overlabel span, .overlabel input {
  text-align: left;
  font-size: 1em;
  line-height: 2em;
  padding: 0 0.5em;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  border-width: 0;
  width: 100%;
  outline: 0;
}

JavaScript

$('.overlabel').each(function () {
    var $this = $(this);
    var field = $this.find('[type=text], [type=file], [type=email], [type=password], textarea');
    var span = $(this).find('> span');
    var onBlur = function () {
        if ($.trim(field.val()) == '') {
            field.val('');
            span.fadeIn(100);
        } else {
            if (field.prop('type') == 'file') {
                span.text(field.val());
            } else {
                span.fadeTo(100, 0);
            }
        }
    };
    field.focus(function () {
        span.fadeOut(100);
    }).blur(onBlur);
    onBlur();
});