JSFiddle - React, Tailwind, and code Playground
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('keydown', function() {
($(this).val() !== '') ? $(this).addClass('active') : $(this).removeClass('active');
});
});