JSFiddle - React, Tailwind, and code Playground

HTML

<span id="enter_login"><span id="ddd">Вход</span>



<div class="hidden_for_enter" id="bbb">

<input type="text" id="login_enter" name="login" value="login :)" maxlength="32" /> 
 <input type="text" value="Password" name="pasw" id="psw" /> 
  <input type="submit" value="Submit" id="enter_submit" />
    
</div>
</span>

CSS

.hidden_for_enter{
   display:none;
}
#ddd{
    cursor:pointer;
}

JavaScript

$('#enter_login').on("click",function(){
    $('#ddd').text('');
    $('div.hidden_for_enter').removeClass('hidden_for_enter');    
});
$('#enter_login').focusout(function(){
    $('#bbb').addClass('hidden_for_enter');
    $('#ddd').text('Вход');
});
    
$('#login_enter').on("focus", function () {
        this.value='';
});
$('#login_enter').focusout(function () {
        if(this.value==''){
             this.type='text';
            this.value='login :)';
         }
});
        
    
$('#psw').focus(function () {
        this.type='password';
        this.value='';
    
});
    
$('#psw').focusout(function () {
      if(this.value==''){
            this.type='text';
            this.value='Password';
        }
});