JSFiddle - React, Tailwind, and code Playground

by rvaldez

HTML

<p>A function is triggered when the user releases a key in the input field. The function transforms the characters size.</p>Enter your name:
<input type="text" id="fname" onkeyup="myFunction()">

CSS

#fname {
    height:25px;
    width:225px;
}

JavaScript

function myFunction() {
    var x = document.getElementById("fname");
    var initialSize = 25 - x.value.length;
    initialSize = initialSize <= 10 ? 10 : initialSize;
    x.style.fontSize = initialSize + "px";
}