JSFiddle - React, Tailwind, and code Playground

HTML

<div id="newsletter">
    <form action="#" class="form-post">
        <div class="clearfix">
            <input type="text" id="email" name="email" placeholder="email" />
            <button id="fake">Send</button>
        </div>
        <div id="contain_name" class="clearfix">
            <input type="text" id="person_name" placeholder="full name" />
            <button id="real_button">Send</button>
        </div>
    </form> 
</div>

CSS

.clearfix {
    *zoom: 1;
}

.clearfix:after {
    clear: both;
    content: "";
    display: table;
}

.form-post {
    width: 300px;
    padding: 20px;    
}

.form-post div {
     margin: 20px;   
}

.form-post div#contain_name {
    display: none;    
}

input, button {
    padding: 10px 20px;
    float: left;    
}

JavaScript

$('#email').focus(function() {
    $('#fake').fadeOut();
    $('#contain_name').slideDown();
});

$(document).on('click', function(){
    //do something here
});

//$('#email, #person_name').blur(function(e){
//    if (e.target.id == 'email' || e.target.id == 'person_name') {
//        return;
//    }
//    
//    $('#contain_name').slideUp();
//    $('#fake').fadeIn();
//});