inputs

normal input

                
                <input type='text' class='input input-md pd-xs' placeholder="Enter here..." />
                
            

input with validation error

submit

                
                <input id='input' type='text' class='input input-md pd-xs' placeholder="Enter here..." />
                <button id='submit-btn' class='btn-solid txt-secondary bg-secondary pd-xs'>
                    submit
                </button>
                
            

                
                const formSubmit = document.querySelector('#submit-btn')
                const formInput = document.querySelector('#input')
                    
                formSubmit.addEventListener('click', () => {
                    formInput.value= ''
                    formInput.classList.add('input-err')
                    setTimeout(() => {
                        formInput.classList.remove('input-err')
                    },3000)
                })                    
                
            

input css

                
                /* input style */
                .input {
                    outline: none;
                    border-style: none;
                }
                /* input width */
                    
                .input-s {
                    width: 10rem;
                }
                    
                .input-md {
                    width: 15rem;
                }
                    
                .input-lg {
                    width: 20rem;
                }
                    
                .input-xlg {
                    width: 30rem;
                }
                    
                .input:focus {
                    border-bottom-style: solid;
                    border-bottom-width: 0.18rem;
                    border-color: var(--clr-secondary);
                }
                    
                .input-err {
                    border-bottom-style: solid;
                    border-bottom-width: 0.19rem;
                    border-color: var(--clr-error);
                }