JSFiddle - React, Tailwind, and code Playground

by Jude Duran

HTML

<div id="div">
    <div id="main">
         <h3>Personal Details</h3>
Name
        <input type="text" style="margin-left:10%" id="name" />
        <br>
        <br>Email
        <input type="text" style="margin-left:11%" id="email" />
        <br>
        <br>
        <button id="submit">submit</button>
    </div>
</div>

CSS

#div {
    position : relative;
    width:500px;
    height:300px;
    background-color:#888;
    margin-left:25%;
    text-align : center;
    padding:5%;
    margin-top:100px;
}
#main {
    position: absolute;
    border: 1px solid #ccc;
    padding: 5px;
    width: 300px;
    margin-left: 15%;
    border-top :10%;
}

JavaScript

$("document").ready(function () {
    $("#submit").click(function () {
        var name1 = $("#name").val();
        var email = $("#email").val();
        $("#div").animate({
            "left": "1000px"
        }, "fast", function () {
            $(this).after("Thank you" + " " + name1 + "." + "<br>" + "Your email is" + " " + email);
            $(this).css("display", "none");
        });
    });
});