JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header"></div><br><br>
        <div id="container">
            <div id="container1">
                <h3>Enter the system</h3>
                <p><span>It is necessary to login in Your account in order to sign up for a course.</span></p>
            </div>

            <div id="container2">
                <p><span id="span1">ARE YOU NEW?</span><span id="span2">REGISTER</span></p>
                <form method="POST" action="javascript:void(0)" enctype="multipart/form-data">
                    <input type="text" name="username" required placeholder="User name" autocomplete="off"
                                pattern="^[A-Za-z0-9._-]{6,10}$" size="40" maxlength="10">
                <br><br>
                <input type="email" name="emailid" required placeholder="Email" autocomplete="off"
                                    pattern="^[A-Za-z0-9 _.-]+@[A-Za-z.-]+\.[A-Za-z]{3,4}$" size="40" maxlength="30">
                <br><br>
                <input type="password" name="password" required placeholder="Password" autocomplete="off"
                                    pattern="^[A-Za-z0-9 _.-]{8,15}$" size="40" maxlength="15">
                <br><br>
                <input type="password" name="confirmpassword" required placeholder="Confirm Password" 
                                    pattern="^[A-Za-z0-9 _.-]{8,15}$" size="40" maxlength="15" autocomplete="off">
                <br><br>
                <input type="submit" name="register" value="Register">  
                </form>
            </div>

            <div id="container3">
                <form method="POST" action="javascript:void(0)" enctype="multipart/form-data">
                    <p><span class="span3">ALREADY A STUDENT?</span><span class="span4">LOGIN</span></p>
                    <br><br>
                    <input type="text" name="loginname" required placeholder="User name" autocompleter="off"
                                    pattern="^[A-Za-z0-9._-]{6,10}$" size="40"...

CSS

<style type="text/css">
            #header{
                height: 20px;
                background-color: #2A646C;
                width: 50%;
                margin: auto;
            }
            #container{
                display:flex;
                flex-wrap: wrap;
                border: 2px solid red;
                width: 50%;
                margin: auto;
                padding: 10px;
                background-color: #C4D8E2;
            }
            #container1{
                border: 2px solid yellow;
                width: 100%;
                background-color: #C4D8E2;
            }
            #container1 p span{
                background-color: #C4D8E2;
                color: #5D8AA8;
                font-family: sans-serif;
                font-size: 12px;
            }
            #container1 h3{
                background-color: #C4D8E2;
            }
            #container2{
                border: 2px solid blue;
                width: 45%;
                background-color: #C4D8E2;
                margin-right: 8%;
                display:flex;
                flex-wrap: wrap;
            }
            #container2 form{
                width: 100%;
                height: 100%;
            }
            #container2 p{
                width:100%;
            }
            #container2 span{
                font-weight: bold;
                font-family: "Times New Roman";
                font-size: 16px;
            }
            #container2 #span1{
                color: #5D8AA8;
                margin-right: 5px;
            }
            #container2 #span2{
                color: #5072A7;
            }
            #container2 input[type=submit]{
                border: 1px solid black;
                width: 25%;
                height: 40px;
                margin-left: 68%;
                background-color: #C4D8E2;
            }
            #container3{
                border: 2px solid green;
                width: 45%;
    ...