JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" name="" class="float-input" />
<span class="err-msg"></span>

CSS

.err-msg { font-size:small; font-style:italic; color:red; }

JavaScript

$(function(){
    
 $('.float-input').keypress(function(event) {
      if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
        event.preventDefault();
      } else {
           var entered_value = $(this).val();
          var regexPattern = /^\d{0,8}(\.\d{1,3})?$/; 
          if(regexPattern.test(entered_value)) {
              $(this).css('background-color', 'white');
              $('.err-msg').html('');
          } else {
              $(this).css('background-color', 'red');
              $('.err-msg').html('Enter a valid Decimal Number');
          }
      }
});
    
});