JSFiddle - React, Tailwind, and code Playground

HTML

<div id='container'>
    <input type='text'></input>
    <div class='fader'></div>
</div>

CSS

#container {
    position: relative;
    height: 25px;
    width: 400px;
}

input {
    width: 100%;
}

input, .fader {
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    font-family: monospace;
}

.fader {
    top: 2px;
    bottom: 4px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 0px, white, 15px, white 100%);
    transition: left 1s ease;
}

JavaScript

$("input").on("keydown", function(e) {
    var width = $("input").val().length + 1;
    $(".fader").css("left", (width * 8) + 3);
});