JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.js"></script>

<div class="input-field">
  <input id="amount" class="amount" name="amount" type="text" maxlength="15" class="validate" />
  <label for="amount">Deposit Amount</label>
</div>

CSS

.input-field {
  position: relative;
}
.input-field.focus:before {
  position: absolute;
  top: 0.7em;
  content: '$0.00';
  opacity: .5;
}

JavaScript

$('.amount').focus(function(){
    $(this).parent().addClass('focus');
});
$('.amount').focusout(function(){
    $(this).parent().removeClass('focus');
});
$('.amount').keyup(function() {
		if($(this).val().length > 0) {
    		$(this).parent().removeClass('focus');
    } else {
    		$(this).parent().addClass('focus');
    }
})