• HTML
• CSS
• JS

HTML

<div class="input-box">
    <textarea placeholder="Add your title" name="name" rows="8" cols="80"></textarea>
    <span class="title">Title</span>
    <div class="characters">
        <span class="signal_num">0</span>
        <span class="limit_num">/100</span>
    </div>
</div>

CSS

/* Google font import link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}
body{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#007bff;
    padding: 0 15px;
}
.input-box{
    position:relative;
    height:160px;
    max-width:560px;
    width:100%;
    background:#fff;
    padding:30px;
    border-radius:6px;
}
.input-box textarea{
    height:100%;
    width:100%;
    outline:none;
    border:2px solid rgba(0,0,0,0.2);
    border-radius:6px;
    resize:none;
    padding:25px 15px;
    font-size:15px;
    font-weight:500;
    caret-color:#007bff
}
.input-box textarea:focus,
.input-box textarea:valid{
    border-color:#007bff;
}
.input-box.error textarea{
    border-color:red;
}
.input-box textarea::placeholder{
    font-size:15px;
    font-weight:500;
}
.input-box .title{
    position:absolute;
    top:38px;
    left:45px;
    color:#007bff;
}
.input-box.error .title{
    color:red;
}
.input-box .characters{
    position:absolute;
    bottom:35px;
    right:45px;
    display:flex;
    align-items:center;
    color:#007bff;
    display:none;
}
.input-box.error .characters{
    color:red;
}
.input-box.active .characters{
    display:block;
}
.input-box.error .characters{
    display:block;
}

JS

let inputBox = document.querySelector(".input-box"),
    textarea = inputBox.querySelector("textarea"),
    signalNum = inputBox.querySelector(".signal_num");

textarea.addEventListener("keyup",() =>{
    
    let valLenght = textarea.value.length;//stored textarea
    
    signalNum.innerText = valLenght; //converted signalNum innerText
    (valLenght > 0) ? inputBox.classList.add("active") : inputBox.classList.remove("active");
    (valLenght > 100) ? inputBox.classList.add("error") : inputBox.classList.remove("error");
    
});

/* All the credist: https://www.youtube.com/watch?v=5xJlLAWrAGg */