JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<input class="toUpperCase" placeholder="Placeholder stays lowercase" type="text"/>
<br>
<input class="toUpperCase" value="Pre-populated input" type="text"/>

JavaScript

(function ( $ ) {

  var displayUppercase = function ($element) {
    if ($element.val()) {
      $element.css('text-transform', 'uppercase');
    } else {
      $element.css('text-transform', 'none');
    }
  };

  $.fn.displayAsUppercase = function() {
  	$(this).each(function() {
    	var $element = $(this);
      displayUppercase($element);
      $element.on('input', function(){displayUppercase($element)});
    });
    return this;
	};
 
}( jQuery ));

$(function() {
	$(".toUpperCase").displayAsUppercase();
})