JSFiddle - React, Tailwind, and code Playground

HTML

<style type="text/css" id="color_scheme">
   .buttons {background:#333333; color:#ffffff;}
</style>
<input name="button_background" id="button_background" value="#333333" />
<input name="button_color" id="button_color" value="#ffffff" />

<button class="buttons">Test</button>

JavaScript

function generateStylesContent(){
    var btnBgr = $("#button_background").val();
    var btnColor = $("#button_color").val();
    var stylesPlaceholder = ".buttons{background:[BACKGROUND];color:[COLOR];}";
    
    var newGeneratedStyles = stylesPlaceholder.replace("[BACKGROUND]", btnBgr)
                                              .replace("[COLOR]", btnColor)    
    
    $('#color_scheme').text(newGeneratedStyles);
};

$('.buttons').on('click', function(){
    generateStylesContent();    
})