JSFiddle - React, Tailwind, and code Playground

by sstedman

HTML

<!-- the span wrapper around the input has been removed, moving the input to the same DOM tree level. -->

<div class="theInput">
    <input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required effectForm" aria-required="true" aria-invalid="false" />
    <span class="theLabel" id="your-name">Name</span>
</div>

CSS

/* Note the display:inline block needed for the transform to work as well as vendor prefixes */

input.wpcf7-text:focus + span {
            display: inline-block;
  -webkit-transform: translateY(-25px);
      -ms-transform: translateY(-25px);
          transform: translateY(-25px);
}