<div class="form">

<form>
<div class="username">
<div class="left">
<i class="fas fa-user"></i>
</div>
<div class="right">
<input type="text" placeholder="Name">
</div>
</div>

<div class="email">
<div class="left">
<i class="fas fa-envelope"></i>
</div>
<div class="right">
<input type="email" placeholder="Email">
</div>
</div>

<div class="password">
<div class="left">
<i class="fas fa-lock"></i>
</div>
<div class="right">
<input type="password" placeholder="Password">
</div>
</div>

<div class="sign-up">
<input type="submit" value="Sign Up">
</div>
</form>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "PT Sans";
}

body {
height: 100vh;
background-color: #2c2c54;
}

.form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

form {
padding: 40px;
border-radius: 4px;
box-shadow: 0 7px 5px #00000066;
}

form .username,
form .email,
form .password,
form .sign-up {
width: 300px;
height: 60px;
margin-bottom: 15px;
border-radius: 4px;
overflow: hidden;
}

form .left {
float: left;
width: 50px;
height: 60px;
background-color: #40407a;
text-align: center;
line-height: 55px;
color: #f7f1e377;
}

form .right {
float: left;
width: 250px;
height: 60px;
}

form .right input {

display: inline-block;
width: 100%;
height: 100%;
border: none;
background: #4747874d;
outline: none;
padding: 0 15px;
color: #d1ccc0;
font-size: 18px;
transition: background 0.2s linear;
}

form .right input:hover,

form .right input:focus {
background-color: #474787;
}

form input::placeholder {
color: #f7f1e344;
}

form .sign-up input {

width: 100%;
height: 100%;
background: #40407a66;
border: none;
outline: none;
cursor: pointer;
color: #d1ccc0;
 font-size: 18px;
transition: background 0.2s linear;
}

form .sign-up input:hover {

background: #40407a;
}

</style>