JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<div id="myform">

<p>blah blah blah blah blah </p>

<input id="submit" value="send" type="submit"/>

</div>
</div>

CSS

#container{
width:342px;
height:170px;
padding:10px;
bottom: 50px;
right: 50px;
position:absolute;    
background-color:grey;         
}
#myform{
width:322px;
height:100px;
padding:0px;
background-color:blue;
} 
#foo{
width:322px;
height:100px;
color: #6F6F6F;
padding: 0px;
outline:none;
background-color:white;            
} 
#submit{
color: #6F6F6F;
padding: 10px 2px 0px 0px;
margin:0px 0px 30px 18px;
outline:none;    
}

JavaScript

$('#submit').click(function(){
    $('#myform').fadeOut("slow", function(){
   var dot = $("<div id='foo'>Goodmorning Mr. Patti<br /><br />Thank you..</div>").hide();
   $(this).replaceWith(dot);
   $('#foo').fadeIn("slow");
});
        });