JSFiddle - React, Tailwind, and code Playground

HTML

<input id="textbox_id" onFocus="btn()" onBlur="btn2()" placeholder="some random text" type="text" />

CSS

.myClass::-webkit-input-placeholder {
    opacity: 0;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.myClass2::-webkit-input-placeholder {
    opacity: 1;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

JavaScript

function btn() {
    $('#textbox_id').addClass("myClass");
}
function btn2() {
    $('#textbox_id').addClass("myClass2");
}