JSFiddle - React, Tailwind, and code Playground

HTML

<p>Enter number: <input type="text"/></p>
<p>Result: <span id="result"></span></p>

CSS

p {
    margin: 0px;
    font-family: Helvetica, Arial, sans-serif;
}

JavaScript

function convert(num){
    num = parseInt(num);
    
    var result = '',
        ref = ['M','CM','D','CD','C','XC','L','XL','X','IX','V','IV','I'],
        xis = [1000,900,500,400,100,90,50,40,10,9,5,4,1];
    
    if (num >= 4000) {
        num += ''; // need to convert to string for .substring()
        result = '<span style="border-top: 1px solid; margin-top: 2px; display: inline-block; padding-top: 0px;">'+convert(num.substring(0,num.length-3))+'</span>';
        num = num.substring(num.length-3);
    }
    
    for (x = 0; x < ref.length; x++){
        while(num >= xis[x]){
            result += ref[x];
            num -= xis[x];
        }
    }
    return result;
}

// Needed for page to work, ignore from this point on
$('input').on('keyup keydown change',function(e){
    var $this = $(this),
        val = $this.val();
    if (val.length == 0) return $('#result').html('');
    if (isNaN(val)) return $('#result').html('Invalid input');
    if (e.type == 'keydown'){
        if (e.keyCode === 38) $this.val(++val);
        if (e.keyCode === 40) $this.val(--val);
    }
    if (val < 1) return $('#result').html('Number is too small');
    
    $('#result').html(convert(val));
});