JSFiddle - React, Tailwind, and code Playground

by davidpauljunior

HTML

<body>
<input type = "button" onclick = "insert()" value = "Sign-Up" id="b1" name="b1">    
<input type = "button" onclick = "retrieve()" value = "Sign-In" id="b2" name="b2">
<br><br>
<div id = "n1">
    <form id="form" name="form" action="page.php"  method ="POST">
    <fieldset>
        <legend><b>Sign-Up</b></legend> 
...
    </form>
    <br><br><br><br>
</div>
    <br><br>
<div id = "n2">
    <form id="form2" name="form2" action="page2.php" method="POST">
    <fieldset>
    <legend><b>Retrieve Info<b></legend>
        ...
        <br><br>
    </fieldset>
    </form>

</div>

<br><br>
</body>

CSS

* {margin:0; padding:0}
#n1{width:160px; margin:100px auto} /* changed the width here */
#n2{width:160px; margin:100px auto}
#b1, #b2{float:left; display:inline; width: 49%;} 


#form {overflow: hidden; padding:0 20px 20px 20px; background:#87CEFA; border:2px solid #87CEFA; border-radius: 10px; box-shadow: 5px 5px 5px 5px #191970}
#form fieldset{float:left; border:2px solid #87CEFA}
#form legend{font:15px Verdana, Arial, Helvetica, sans-serif; color:#fff; text-align:center}
#form label {float:left; width:146px; padding:10px 10px 0 0; font-weight:bold}
#form select {float:left; width:100px; margin-top:10px}
#form input {float:left; margin-top:10px}
#form .submit {clear:both}


#form2 {overflow: hidden; padding:0 20px 20px 20px; background:#87CEFA; border:2px solid #87CEFA; border-radius: 10px; box-shadow: 5px 5px 5px 5px #191970}
#form2 fieldset{float:left; border:2px solid #87CEFA}
#form2 legend{font:15px Verdana, Arial, Helvetica, sans-serif; color:#fff; text-align:center}
#form2 label {float:left; width:146px; padding:10px 10px 0 0; font-weight:bold}
#form2 select {float:left; width:100px; margin-top:10px}
#form2 input {float:left; margin-top:10px}
#form2 .submit {clear:both}