JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>On load, font size is set depending on length of title.</li>
    <li>However, I want this to be reactive...</li>
    <li>Change the length of Title and hit run</li>
<ul>
    <br/><br/>
<span id="title">TEST TEST</span><br/>

JavaScript

$(function() {
    var that = $('#title'),
		planName = that.html().length
    ;
    // depending on html length, update font-size
    if(planName > 30) {
        that.css('font-size', '10px');
    } else if(planName > 20) {
        that.css('font-size', '12px');
    } else if(planName > 10) {
        that.css('font-size', '15px');
    }
});