JSFiddle - React, Tailwind, and code Playground

by Mourad EL AOMARI

HTML

<form class="form">
  <div>
    <label for="">Email</label>
    <input class="email" type="email" name="email" required>
  </div>
  <div>
    <label for="">Password</label>
    <input class="password" type="password" name="password" required>
  </div>
    <input class="submit" type="submit">
</form>

CSS

.email, .password{
    position: absolute;
    bottom: 0;
    height: 32px;
    width: 300px;
    background-color: transparent;
    border: 1px solid #aaa;
    padding: 0 10px;
}
.submit{
    margin-top: 10px;
    width: 120px;
    height: 40px;
    background-color: yellowgreen;
    border: 0;
    cursor: pointer;
}
label{
    color: red;
    display: block;
    position: absolute;
    top: 7px;
    left: 5px;
    transition: all 0.5s;
}
div{
    height: 34px;
    margin-top: 29px;
    position: relative;
}
.active{
    top: -20px;
}

JavaScript

/*********** This part of code for moving labels with kaybord keyup or mouse focus or mouse blur ************/

                        $('.form').find('input').on('keyup blur focus', function (e) {
                          
                          var $this = $(this),
                              label = $this.prev('label');

                          if (e.type === 'keyup' ) {
                            if ($this.val() === '') {
                              label.removeClass('active highlight');
                            } 
                            else {
                              label.addClass('active highlight');
                            }
                          } 
                          else if (e.type === 'blur') {
                            if( $this.val() === '' ) {
                              label.removeClass('active highlight');
                            } 
                            else {
                              label.removeClass('highlight');
                            }   
                          } 
                          else if (e.type === 'focus') {
                            if( $this.val() === '' ) {
                              label.removeClass('highlight');
                            } 
                            else if( $this.val() !== '' ) {
                              label.addClass('highlight');
                            }
                          }
                        });
                        
/****************** This part of code for moving labels with autofilled inputs ********************/

                          $('.form input').bind('blur change', function(){
                              $('.form').find('input').each(function(){
                                label = $(this).prev('label');
                                if($(this).val()!==''){
                                  label.addClass('active');
                                }
                             ...