JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<button id="upload_widget" class="cloudinary-button">Upload files</button>

<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>  

<script type="text/javascript">  
var myWidget = cloudinary.openUploadWidget({
  cloudName: "shirly",
  uploadPreset: "my-preset",
  clientAllowedFormats: "jpg",
  styles: {
        palette: {
            window: "#FFFFFF",
            windowBorder: "#90A0B3",
            tabIcon: "#0078FF",
            menuIcons: "#5A616A",
            textDark: "#000000",
            textLight: "#FFFFFF",
            link: "#0078FF",
            action: "#FF620C",
            inactiveTabIcon: "#0E2F5A",
            error: "#FF620C",
            inProgress: "#0078FF",
            complete: "#20B832",
            sourceBg: "#E4EBF1"
        },
        fonts: {
        f7:{
        "font-size": "30px"
        },
            default: {
                active: true
            }
        }}}, (error, result) => { });

document.getElementById("upload_widget").addEventListener("click", function(){
    myWidget.open();
  }, false);
</script>