JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<div class="limit_length min0 max11">Hello World</div>
<div class="limit_length min0 max11">Hello World</div>
<div class="limit_length min0 max10">Hello World</div>
<div class="limit_length min0 max10">Hello World</div>

CSS

.limit_length {
 background: red;
  display: block;
   width: 100px; 
}

JavaScript

$('.limit_length').click(function(){
    var min = /min(\w+)/.exec(this.className)[1].toLowerCase(), 
        max = /max(\w+)/.exec(this.className)[1].toLowerCase();
   log([min, max]);
});

$('.limit_length').each(function(i, el){
    $(el).css({'width':(parseFloat(/max(\w+)/.exec(this.className)[1].toLowerCase()) * 10) + "px"});    
});

function log(output){
    var temp = "";
    $.each(output, function(i, el){
        temp += el +  ":"; 
    });
    if(console){
        console.log(temp);
    }     
}