JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-col">
<p><label>Your name here</label><br />
    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" /></span> </p>
<p><label>Company Name</label><br />
    <span class="wpcf7-form-control-wrap company-name"><input type="text" name="company-name" value="" class="wpcf7-form-control wpcf7-text" size="40" /></span> </p>
<p><label>Your e-mail*</label><br />
    <span class="wpcf7-form-control-wrap your-email"><input type="text" name="your-email" value="" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" size="40" /></span> </p>
<p><label>Country*</label><br />
    <span class="wpcf7-form-control-wrap country"><input type="text" name="country" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" /></span> </p>
<p><label>City*</label><br />
    <span class="wpcf7-form-control-wrap city"><input type="text" name="city" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" /></span> </p>
</div>

CSS

.form-col {
    width: 250px;
    float: left;
    margin-right: 24px;
}

.wide {
    width: 450px;
}

.form-col p {
    position: relative;
}

.form-col br {
    display: none;
}

.form-col label {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.form-col input[type=text], .form-col textarea {
    width: 100%;
}
.class1{
 color:white; 
}
}

JavaScript

(function($) {
    function toggleLabel() {
        var input = $(this);
        setTimeout(function() {
            var def = input.attr('title');
            if (!input.val() || (input.val() == def)) {
                input.parent().siblings('label').css('visibility', '');
                if (def) {
                    var dummy = $('<label></label>').text(def).css('visibility','hidden').appendTo('body');
                    input.parent().siblings('label').css('margin-left', dummy.width() + 3 + 'px');
                    dummy.remove();
                }
            } else {
                input.parent().siblings('label').css('visibility', 'hidden');
            }
        }, 0);
    };

    function resetField() {
        var def = $(this).attr('title');
        if (!$(this).val() || ($(this).val() == def)) {
            $(this).val(def);
            $(this).parent().siblings('label').css('visibility', '');
        }
    };

    $('input, textarea').live('cut', toggleLabel);

    $('input, textarea').live('keydown', toggleLabel);
    $('input, textarea').live('paste', toggleLabel);
    $('select').live('change', toggleLabel);

    $('input, textarea').live('focusin', function() {
        $(this).parent().siblings('label').css('color', '#FFF' , 'opacity', '0.5');
    });
    $('input, textarea').live('focusout', function() {
        $(this).parent().siblings('label').css('color', '#CCC');
    });

    // set things up as soon as the DOM is ready
    $(function() {
        $('input, textarea').each(function() { toggleLabel.call(this); });
    });

    // do it again to detect Chrome autofill
    $(window).load(function() {
        setTimeout(function() {
            $('input, textarea').each(function() { toggleLabel.call(this); });
        }, 0);
    });
    for(var i = 0, i < 5, i++){
      $('label').addClass("class"+i);  
    };
})(jQuery);