JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<script src="https://product-gallery.cloudinary.com/all.js" type="text/javascript">
</script>
<div id="bugaboo-cameleon-1-2" style="max-width:80%;margin:auto">&nbsp;</div>
<script type="text/javascript">
const myWidget = cloudinary.galleryWidget({
    "container": "#bugaboo-cameleon-1-2",
    "cloudName": "kinderwagen-handvat-hoes",
    "mediaAssets": [{
        "tag": "cameleon12",
        "mediaType": "image",
        "transformation": {
          "crop": "fill",
        	transformation: [
          	{
            	overlay: "text:Arial_80:Flowers",
              gravity: "center",
              width: 2.5
              
           	}
          ]
        },
        thumbnailTransformation: {
          "crop": "fill",
        	transformation: [
          	{
            	overlay: "recovers-logo-2020",
              gravity: "south",
              width: 0.7
           	}
          ]
        }
    }],
    "bgColor": "transparent",
    "carouselLocation": "left",
    "carouselOffset": 10,
    "navigation": "always",
    "aspectRatio": "9:16",
    "navigationButtonProps": {
        "shape": "rectangle",
        "color": "#8c5e56",
        "iconColor": "#fff",
        "buttonSize": 42
    },
    "thumbnailProps": {
        "spacing": 18,
        "width": 83,
        "height": 80,
        "navigationFloat": true,
        "mediaSymbolBgShape": "square",
        "navigationShape": "none",
        "selectedStyle": "all",
        "selectedGradientEnd": "#ffffff",
        "selectedBorderColor": "#000000",
        "selectedGradientDirection": "vertical",
        "selectedBorderPosition": "right"
    },
    "viewportBreakpoints": [{
        "breakpoint": 770,
        "carouselLocation": "left"
    }, {
        "breakpoint": 320,
        "carouselStyle": "indicators",
        "carouselLocation": "bottom",
        "thumbnailProps": {
            "color": "#8c5e56"
        }
    }],
    "zoom": true,
    "zoomProps": {
        "trigger": "click",
        "level": 2
    },
   ...