JSFiddle - React, Tailwind, and code Playground

HTML

<div><input type="text" placeholder="текст1" class="input1"></div>
<div><input type="text" placeholder="текст2" onfocus="this.placeholder = ''" onblur="this.placeholder = 'текст2'"></div>
<div></div>
    
<div> <input type="text" class="input2" placeholder="текст3"></div>

CSS

.input1:focus::-webkit-input-placeholder { color:transparent; }
.input1:focus:-moz-placeholder { color:transparent; }
.input1:focus::-moz-placeholder { color:transparent; }
.input1:focus:-ms-input-placeholder { color:transparent; }
.input2:focus::-webkit-input-placeholder {
  transition: text-indent 0.5s 0.5s ease; 
  text-indent: -100%;
  opacity: 1;
}