JSFiddle - React, Tailwind, and code Playground

HTML

<head>
    
</head>

<body>
    <input id="input" type="text" placeholder="Placeholder text" value="">
        
    <p>
        <a href="#" id="change-placeholder-color">Change placeholder color</a>
    </p>
</body>

CSS

input:-moz-placeholder {color: #BBBBBB;} 
input::-webkit-input-placeholder {color: #BBBBBB;}

JavaScript

$(document).ready(function() {
    
    // add style block to the <head> with default placeholder css on page load
    var defaultColor = 'BBBBBB';
    var styleContent = 'input:-moz-placeholder {color: #' + defaultColor + ';} input::-webkit-input-placeholder {color: #' + defaultColor + ';}';
    var styleBlock = '<style id="placeholder-style">' + styleContent + '</style>';
    $('head').append(styleBlock);
    
    // click 'Change placeholder color'
    $('a#change-placeholder-color').click(function (e) {
        e.preventDefault();
        // generate random color
        var randomColor = Math.floor(Math.random()*16777215).toString(16);
        // generate new styles and append to the placeholder style block
        styleContent = 'input:-moz-placeholder {color: #' + randomColor + ';} input::-webkit-input-placeholder {color: #' + randomColor + ';}'
        $('#placeholder-style').text(styleContent);
    }); 
});