JSFiddle - React, Tailwind, and code Playground

by jdanyow

HTML

<div class="forms">
<div class="form1">
    <P>
    <LABEL for="firstname">First name: </LABEL>
              <INPUT type="text" id="firstname"><BR>
    <INPUT id="send" type="submit" value="Send"> <INPUT type="reset">
    </P>
 </div>

<div class="form2">
    <P>
    <LABEL for="firstname">First name: </LABEL>
              <INPUT type="text" id="firstname"><BR>
    <INPUT id="send2" type="submit" value="Send"> <INPUT type="reset">
    </P>
</div>
</div>

CSS

.forms{background: #000; width: 100px; height: 100px;} 

.form2 {display: none;}

JavaScript

$("#send").click(function(){
    $(".form1").hide(1000,function(){
        $(".form2").css({display:"block"});
        $(".forms").css({background: "#941d25"});
    });
  });

$("#send2").click(function(){
    $(".form2").hide(1000, function(){
        $(".forms").css({background: "#052274"});
    });
        });