• HTML
• CSS
• JS

HTML

<div>
    <h3>Email Validation Check</h3>
    <form id="form" action="#">
        <div class="inputBox">
            <input type="text" name="" id="email" placeholder="Enter Email Address" onkeydown="validation()">
            <span id="text"></span>
        </div>
    </form>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
*
{
    margin:0;
    padding:0;
    font-family:'Poppins',sans-serif;
}
body
{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background:#373737;
}
h3
{
    position:relative;
    font-size:20px;
    color:#f9f9f9;
    letter-spacing:1px;
    font-weight:500;
    margin-bottom:5px;
}
#form{
    position:relative;
}
#form #email
{
    width:300px;
    background:#292929;
    outline:none;
    border:none;
    padding:10px;
    border-radius:6px;
    color:#fff;
    font-style:18px;
}
#form #inputBox
{
    position:relative;
}
#text
{
    display:block;
    color:#000;
    font-style:italic;
    padding:5px;
}
#form.invalid #inputBox:before
{
    content:'';
    position:absolute;
    right:12px;
    top:12px;
    width:24px;
    height:24px;
    background:url(invalid.png);
    background-size:cover;
    z-index:1000;
}

JS

function validation()
{
    var form = document.getElementById("form");
    var email = document.getElementById("email").value;
    var text = document.getElementById("text");
    var pattern = /^[^ ]+@[^ ]+\\.[a-z]{2,3}$/;
    
    if(email.match(pattern))
    {
        form.classList.add("valid");
        form.classList.remove("invalid");
        text.innerHTML = "Your Email Address in Valid.";
        text.style.color = "#00ff00";
    }
    else
    {
        form.classList.remove("valid");
        form.classList.add("invalid");
        text.innerHTML = "Please Enter Valid Email.";
        text.style.color = "#ff0000";
    }
}

/* All the credits: https://www.youtube.com/watch?v=HzJngc-Se9Q */