JSFiddle - React, Tailwind, and code Playground

HTML

<div class="blockForm" id="demoskjema"><div class="padding">
    <form method="post" action="#demoskjema">
        <fieldset id="f1">
            <legend>Kontaktinformasjon</legend>
    
            <div class="fieldwrapper">
                <label style="display: none;" for="Firma"><span>Firma</span></label>
                <input name="Firma" id="Firma" value="Firma" class="noSize" type="text">
            </div>
    
            <div class="fieldwrapper">
                <label style="display: none;" for="Epost"><span>E-postadresse</span></label>
                <input name="Epost" id="Epost" value="E-postadresse" class="noSize" type="text">
            </div>
    
            <div class="fieldwrapper left">
                <label style="display: none;" for="Navn"><span>Ditt navn</span></label>
                <input name="Navn" id="Navn" value="Ditt navn" class="noSize" type="text">
            </div>
            <div class="fieldwrapper right">
                <label style="display: none;" for="Tlfnr"><span>Telefonnummer</span></label>
                <input name="Tlfnr" id="Tlfnr" value="Telefonnummer" size="8" maxlength="8" class="noSize" type="text">
            </div>
        </fieldset>
    
        <fieldset class="blockFormButtonHolder">
            <div>
                <button type="submit" name="blockFormSubmit" class="button submit"><span><strong>Opprett gratis demo</strong></span></button>
            </div>
        </fieldset>
</form>
</div></div>        </div>
    </div>
</div>

CSS

#demoskjema form .fieldwrapper {
display:block;
line-height:2em;
margin:0 0 0.7em;
}

#demoskjema form div.error {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FFFFDD none repeat scroll 0 0;
border:3px solid white;
font-size:100% !important;
margin-bottom:2em;
padding:1em;
}

#demoskjema form div.error p {
color:#CC1111;
font-size:100% !important;
}

#demoskjema form .error {
background-color:#FFEEEE !important;
}

#demoskjema .blockFormMessage ul {
margin:0;
padding:0;
}

#demoskjema .blockFormMessage, #demoskjema .blockSubscribeFieldFeedback {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FFF6B0 url(../images/bg_box2.gif) repeat-x scroll left top;
color:#444444;
margin-bottom:3em !important;
padding:1.5em;
}
#demoskjema form label {
display:block;
font-size:0.4em;
font-weight:bold;
line-height:1em;
margin-right:1em;
}

#demoskjema form label em {
color:#9CC013;
font-size:80%;
font-style:normal;
font-weight:normal;
}

#demoskjema form .checkboxgroup label, #demoskjema form .radiogroup label {
font-weight:normal;
line-height:1.5em;
}

#demoskjema form .multiline {
line-height:140%;
}

#demoskjema form fieldset {
border:0 none;
margin-bottom:0.5em;
}

#demoskjema form legend {
color:#888888;
display:none;
font-size:2em;
margin:0 0 1em;
padding:0;
}

#demoskjema form {
font-size:100%;
}

#demoskjema form input[type="text"], #demoskjema form input[type="password"], form textarea {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FFFFFF url(../../upload/bg_form_input.png) repeat-x scroll left top;
border:1px solid #6C9EC1;
font-size:1.4em;
margin-top:2px;
padding:0.6em 0.3em;
}

#demoskjema form input[type="text"], #demoskjema form input[type="password"] {
margin-top:1px;

}
#demoskjema form .noSize, #demoskjema form textarea {
width:99%;
height: 33px...

JavaScript

window.addEvent('load', function(){
    
    $$('form')[0].addEvent('submit', function(){
        $$('form .empty').set('value', '');
    });
    
    $$('label').each(function(label){
        var labelname = false;
        if(label.get('for')) {
            labelname = label.get('for');
            labeltext = label.get('text');
            label.setStyle('display', 'none');
        }
        
        if(labelname) {
            var field = $(labelname);
            if(field) {

                if(field.get('value') == '') {

                    field.set('title', labeltext);

                    field.addEvent('focus', function(el) {

                        field_id = this.get('id');
                        labeltarget = 'label [for='+field_id+']';
                        labeltext = '';
                        $$('label').each(function(el) {
                            if(el.get('for') == field_id) {
                                labeltext = el.get('text');
                            }

                        })
                        
                        if(this.get('value') == labeltext) {
                            this.removeClass('empty');                            
                            this.set('value', '');
                        }
                    });

                    field.addEvent('blur', function(el) {

                        field_id = this.get('id');
                        labeltarget = 'label [for='+field_id+']';
                        labeltext = '';
                        $$('label').each(function(el) {
                            if(el.get('for') == field_id) {
                                labeltext = el.get('text');
                            }

                        })
                        
                        if(this.get('value') == '') {
                            this.set('value', labeltext);
                            this.addClass('empty');                            
                       ...