Create a Login form using HTML and CSS.

Preview:

CSS:

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        color: gray;
    }   
    .container-box {
        padding: 20px 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #e0e0e0;
    }
    .login,
        .registration {
        position: absolute;
        width: 100%;
        height: 400px;
        transition: 0.8s;
        padding: 10px;
    }
    .inp,
    .btn {
        margin: 10px 0;
        padding: 5px;
        border-radius: 4px;
    }
    .inp {
        border: none;
        border-radius: 20px;
        height: 40px;
        background: #e0e0e0;
        box-shadow: inset 6px 6px 12px #bebebe, inset -6px -6px 12px #fff;
    }
    .inp:focus {
        border: 1px solid transparent;
    }
    .btn {
        padding: 10px 0;
        border: none;
        border-radius: 20px;
        background: linear-gradient(145deg, #f0f0f0, #cacaca);
        box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #fff;
    }
    .registration {
        left: 100%;
    }
    .login {
        left: 0%;
    }
    .loginbox {
        position: relative;
        width: 40%;
        height: 550px;
        border-radius: 20px;
        overflow: hidden;
        padding: 20px;
        background: #e0e0e0;
        box-shadow: 20px 20px 71px #bebebe, -20px -20px 71px #fff;
    }
    form {
        display: flex;
        flex-direction: column;
    }
        
    #toggear:checked~.registration {
        left: 0;
        transition: 0.8s;
    }
        
    #toggear:checked~.login {
        left: -100%;
        transition: 0.8s;
    }
        
    #toggear:checked:before {
        content: "Sing in";
        left: 50%;
        transition: 0.8s;
    }
        
    #toggear:before {
        content: "Log in";
        background: linear-gradient(145deg, #f0f0f0, #cacaca);
        box-shadow: 8px 8px 13px #dcdcdc, -8px -8px 13px #e4e4e4;
        color: GRAY;
        margin: 0 auto;
        position: absolute;
        display: grid;
        place-items: center;
        left: 0;
        height: 100%;
        width: 50%;
        border-radius: 50px;
        transition: 0.8s;
    }
        
    #toggear {
        border-radius: 50px;
        width: 100%;
        height: 40px;
        background: #e0e0e0;
        box-shadow: inset 8px 8px 16px #bebebe, inset -8px -8px 16px #fff;
        -webkit-appearance: none;
        position: relative;
    }
        
    .atname {
        text-align: center;
        margin: 10px 0;
        background: -webkit-linear-gradient(10deg, #0b5292, #00d4ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    @media (max-width: 768px) {
        .loginbox {
            width: 100%;
            margin: 20px;
        }
    }

HTML :

    <div class="container-box">
        <div class="loginbox">
            <h1 class="atname">PoorWebDev</h1>
            <input type="checkbox" name="" id="toggear">
            <div class="login">
                <form>
                    <label for="Email">Email</label>
                    <input class="inp" type="email" name="emial" id="Email" placeholder="Enter your Email">
                    <label for="password">Password</label>
                    <input class="inp" type="password" name="password" id="password" placeholder="Enter your Password">
                    <button class="btn" type="submit">Submit</button>
                    <label for="toggear">I have not any account</label>
                </form>
            </div>
            <div class="registration">
                <form>
                    <label for="FirstName">FirstName</label>
                    <input class="inp" type="text" name="fname" id="FirstName" placeholder="Enter your first name"><label for="LastName">LastName</label>
                    <input class="inp" type="text" name="lname" id="lastName" placeholder="Enter your last name">
                    <label for="Email">Email</label>
                    <input class="inp" type="email" name="emial" id="Email" placeholder="Enter your email address">
                    <label for="password">Password</label>
                    <input class="inp" type="password" name="password" id="password" placeholder="Enter your password">
                    <button class="btn" type="submit">Submit</button>
                    <label for="toggear">I have all ready registered</label>
                </form>
            </div>
        </div>
    </div>