JSFiddle - React, Tailwind, and code Playground
HTML
<button id="upload_widget" class="cloudinary-button" style="background-color:red">Upload files</button>
<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>
<style>
.cloudinary_fileupload {
background-color: "red" !important;
}
</style>
<script type="text/javascript">
var myWidget = cloudinary.openUploadWidget({
cloudName: "demo", uploadPreset: "preset1",
sources: [ 'local', 'url', 'dropbox','facebook'],
styles:{
palette: {
window: "#FFF",
windowBorder: "#90A0B3",
tabIcon: "#0E2F5A",
menuIcons: "#5A616A",
textDark: "#000000",
textLight: "#FFFFFF",
link: "#0078FF",
action: "#FF620C",
inactiveTabIcon: "#0E2F5A",
error: "#F44235",
inProgress: "#0078FF",
complete: "#20B832",
sourceBg: "red"
},
fonts: {
"'Cute Font', cursive": "https://fonts.googleapis.com/css?family=Cute+Font",
}}
}, (error, result) => { });
document.getElementById("upload_widget").addEventListener("click", function(){
myWidget.open();
document.getElemementByClassName('css-anf0i3 BUTTON outline-0 flex-nowrap items-center justify-center pointer fw6 bg-link bg-link-c').style['background-color'] = 'orange'
}, false);
</script>