JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" value="" id="" placeholder="Placeholder!" />

<input type="text" value="" placeholder="Text" id="" />

CSS

input, ::-webkit-input-placeholder {
    -webkit-transition-property: all;
    -webkit-transition-duration: 1.0s;
}
input {
    background-color: white;
}
::-webkit-input-placeholder {
    color: grey;
}
input:hover {
    background-color: #fdd;
}
input:hover::-webkit-input-placeholder,
input:hover ::-webkit-input-placeholder  {
    color: red;
}