• HTML
• CSS

HTML

<div class="container">
    <h2>Login Account</h2>
    
    <div class="inputBox">
        <input type="text" required="required">
        <span>E-mail</span>
        <i></i>
    </div>
    
    <div class="inputBox">
        <input type="password" required="required">
        <span>Password</span>
        <i></i>
    </div>
    
    <button>SUBSCRIBE</button>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;500;600;700;800;900&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}
body{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background-image:linear-gradient(to bottom right, #14cc86, #5259e5);
}
.container{
    position:relative;
    padding:40px;
    margin:5px;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    border-radius:8px;
    box-shadow:0 15px 35px rgba(0,0,0,0.25);
}
.container .inputBox{
    position:relative;
    width:100%;
    margin-bottom:2.5em;
}
.container .inputBox input{
    position:relative;
    padding:8px 10px;
    width:100%;
    border:none;
    outline:none;
    background:transparent;;
    color:#fff;
    font-size:1.25em;
    letter-spacing:0.05em;
    z-index:2;
}
.container .inputBox span{
    position:absolute;    
    left:0;
    padding:10px 0;
    pointer-events:none;
    font-size:1em;
    transition:0.5s;
    color:#333;
    letter-spacing:0.05em;
}
.container .inputBox input:valid ~ span,
.container .inputBox input:focus ~ span{
    font-size:0.85em;
    transform:translateY(-32px);
}
.container .inputBox i{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:2px;
    background-image:linear-gradient(to bottom right, #14cc86, #5259e5);
    transition:0.5s;
    z-index:1;
    border-radius:4px;
    pointer-events:none;
}
.container .inputBox input:valid ~ i,
.container .inputBox input:focus ~ i{
    height:100%;
    box-shadow:inset 0 0 10px rgba(0,0,0,0.25);
    background:#14cc86;
}
h2{
    text-transform:uppercase;
    color:#14cc86;
    background-image:linear-gradient(
                    -270deg,
                    #14cc86 0%,
                    #14cc86 29%,
                    #5259e5 90%,
                    #5259e5 100%
                    );
    text-fill-color:transparent;
    -webkit-text-fill-color:transparent;
    -webkit-background-clip:text;
    margin-bottom:1.5em;
    font-size:1.3em;
}
button{
    background-image:linear-gradient(to bottom right, #14cc86, #5259e5);
    border:none;
    padding:1em 2em;
    color:#fff;
    font-weight:700;
    border-radius:0.3em;
    cursor:pointer;
}