JSFiddle - React, Tailwind, and code Playground

HTML

<form class="left push-bottom-px10 width-match-parent">
    <input type="text" id="email" value="email"/> 
    <input type="text" id="fakepassword" value="password"/> 
    <input type="password" id="password" value=""/>
</form>

JavaScript

$(document).ready(function() {
    $('#password').hide();
    
    $('#email').bind('focus', function() {
        var currentValue = $.trim($(this).val());
        if(currentValue == 'email') $(this).val('');
    });
    $('#email').bind('blur', function() {
        var currentValue = $.trim($(this).val());
        if(currentValue == '') $(this).val('email');
    });
    $('#fakepassword').bind('focus', function() {
        $('#fakepassword').hide();
        $('#password').show().focus();
    });
    $('#password').bind('blur', function() {
        var currentValue = $.trim($(this).val());
        if(currentValue == '') {
            $('#fakepassword').show();
            $('#password').hide();
        }
    });
});