• HTML
• CSS
• JS

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="box">
    <div class="inputBox">
        <input type="password" id="pswrd" placeholder="Password" onkeyup="checkPassword(this.value)">
        <span id="toggleBtn"></span>
    </div>
    <div class="validation">
        <ul>
            <li id="lower">At least one lowercase character</li>
            <li id="upper">At least one uppercase character</li>
            <li id="number">At least one number</li>
            <li id="special">At least one special character</li>
            <li id="length">At least 8 characters</li>
        </ul>
    </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;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:#8cccff;
}
.box
{
    position:relative;
    width:300px;
}
.box .inputBox
{
    position:relative;
    width:100%;
    background:#fff;
    padding:5px;
    border-radius:8px;
    box-shadow:0 15px 25px rgba(0,0,0,0.15);
}
.box .inputBox input
{
    position:relative;
    width:100%;
    outline:none;
    border:none;
    padding:10px 5px;
}
.box .inputBox #toggleBtn
{
    position:absolute;
    top:8px;
    right:10px;
    width:34px;
    height:34px;
    background:rgba(0,0,0,0.05);
    border-radius:50%;
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
}
.box .inputBox #toggleBtn::before
{
    content:'\\f06e';
    font-family:fontAwesome;
}
.box .inputBox #toggleBtn.hide::before
{
    content:'\\f070';
}
.validation
{
    background:#376488;
    padding:10px;
    margin-top:30px;
    border-radius:8px;
    box-shadow:0 15px 25px rgba(0,0,0,0.15);
}
.validation ul
{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.validation ul li
{
    position:relative;
    list-style:none;
    color:#fff;
    font-size:0.85em;
    transition:0.5s;
}
.validation ul li.valid
{
    color:rgba(255,255,255,0.5);
}
.validation ul li::before
{
    content:'\\f192';
    width:20px;
    height:10px;
    font-family:fontAwesome;
    display:inline-flex;
}
.validation ul li.valid::before
{
    content:'\\f00c';
    color:#0f0;
}

JS

let pswrd = document.getElementById('pswrd');
let toggleBtn = document.getElementById('toggleBtn');

let lowerCase = document.getElementById('lower');
let upperCase = document.getElementById('upper');
let digit = document.getElementById('number');
let specialChar = document.getElementById('special');
let minLength = document.getElementById('length');

function checkPassword(data){
    const lower = new RegExp('(?=.*[a-z])');
    const upper = new RegExp('(?=.*[A-Z])');
    const number = new RegExp('(?=.*[0-9])');
    const special = new RegExp('(?=.*[!@#\$%\^&\*])');
    const length = new RegExp('(?=.*[0-9])');
    
    // lower case validation check
    if(lower.test(data)){
        lowerCase.classList.add('valid');
    }else{
        lowerCase.classList.remove('valid');
    }
    // upper case validation check
    if(upper.test(data)){
        upperCase.classList.add('valid');
    }else{
        upperCase.classList.remove('valid');
    }
    // number case validation check
    if(number.test(data)){
        digit.classList.add('valid');
    }else{
        digit.classList.remove('valid');
    }
    // special charater case validation check
    if(special.test(data)){
        specialChar.classList.add('valid');
    }else{
        specialChar.classList.remove('valid');
    }
    // minium length validation check
    if(length.test(data)){
        minLength.classList.add('valid');
    }else{
        minLength.classList.remove('valid');
    }
}

// show hide password
toggleBtn.onclick = function(){
    if(pswrd.type === 'password'){
        pswrd.setAttribute('type','text');
        toggleBtn.classList.add('hide');
    }else{
        pswrd.setAttribute('type','password');
        toggleBtn.classList.remove('hide');
    }
}

/*
    All the credits:https://www.youtube.com/watch?v=Hi8DVOaZ0Ug&t=133s
*/