JSFiddle - React, Tailwind, and code Playground

by pascal08

HTML

<input type="text" data-type="attribute" /><br />
<input type="text" data-type="attribute" /><br />
<input type="text" data-type="attribute" /><br />
<input type="text" data-type="attribute" /><br />
<input type="text" data-type="attribute" /><br />
<input type="text" data-type="attribute" /><br />
<input type="text" data-type="attribute" /><br />
<input type="text" data-type="attribute" /><br />
<input type="text" data-type="attribute" /><br />
<input type="text" data-type="attribute" /><br />
<input type="text" data-type="attribute" /><br />
<input type="text" data-type="attribute" /><br />
<input type="text" data-type="attribute" /><br />

CSS

input.active {
    background-color: red;
}

JavaScript

$(function () {  
    $('input[data-type="attribute"]').on('change', function() {
      ($(this).val() != '') ? $(this).addClass('active') : $(this).removeClass('active');
    });
  });