JSFiddle - React, Tailwind, and code Playground

HTML

<div class="span4">
    <form class="navbar-search input-append">
        <input id="appendedInputButton" type="text" class="input-xlarge marker" placeholder="great">
        <button class="btn" type="button"><i class="icon-id"></i></button>
    </form>
</div>

CSS

#appendedInputButton.marker::-webkit-input-placeholder {
    color: blue;
}
#appendedInputButton.marker:-moz-placeholder {
    color: blue;
}


#appendedInputButton::-webkit-input-placeholder {
    color: red;
}
#appendedInputButton:-moz-placeholder {
    color: red;
}

#appendedInputButton::-webkit-input-placeholder{
transition: all 2s;
-webkit-transition: all 2s; /* Safari and Chrome */

}
#appendedInputButton:-moz-placeholder{
transition: all 2s;
-moz-transition:all 2s; /* Firefox 4 */; 

}

JavaScript

var fonts = ['public', 'weird', 'amazing'];    
   var time = setInterval(function() {
       
          
          var newFont = fonts[Math.floor(Math.random()*fonts.length)];
          $('#appendedInputButton').attr('placeholder', newFont).removeClass('marker');

       if (integer == 0) clearInterval(time);
   },2000);