*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  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;
    border: none;
    outline: none;
    padding: 10px;
    border-radius: 6px;
    color: #fff;
    font-style: 18px;
  }
  .inputBox{
    position: relative;
  }

  #text{
      display: block;
      color: #000;
      font-weight: 500;
      font-style: italic;
      padding: 5px;
  }

  #form.invalid .inputBox::before{
      content: "";
      position: absolute;
      right: 12px;
      top: 6px;
      width: 24px;
      height: 24px;
      background-color: #ff0000;
      z-index: 1000;
  }
  #form.valid .inputBox::before{
      content: "";
      position: absolute;
      right: 12px;
      top: 6px;
      width: 24px;
      height: 24px;
      background-color: #00ff00;
      z-index: 1000;
  }

  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 is vaild";
    text.style.color = "#00ff00";
  } else{
     form.classList.remove('valid');
     form.classList.add('invalid');
     text.innerHTML = "please enter valid email";
    text.style.color = "#ff0000";
  }

  if(email == "") {
    form.classList.remove('valid');
    form.classList.remove('invalid');
    text.innerHTML = "";
    text.style.color = "#00ff00";
}
          };