JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://product-gallery.cloudinary.com/all.js" type="text/javascript">
</script>

<script type="text/javascript">
const myWidget = cloudinary.galleryWidget({
"container": "#product-gallery",
"cloudName": "dizio",
"mediaAssets": [{
"tag": "5e5035bd03ee4300172a2e97",
"mediaType": "image"
}, {
"tag": "5e5035bd03ee4300172a2e97",
"mediaType": "video",
"transformation": { transformation: [{ h: 720, w: 1280 }]}
}],
"carouselStyle": "thumbnails",
"carouselLocation": "bottom",
"navigation": "mouseover",
"aspectRatio": "16:9",
"thumbnailProps": {
"width": 120,
"height": 96,
"mediaSymbolPosition": "center",
"mediaSymbolBgShape": "radius",
"selectedStyle": "all",
"selectedBorderColor": "#d0021b",
"selectedBorderPosition": "all",
"mediaSymbolBgOpacity": 0.8
},
"videoProps": {
"controls": "all",
},
"zoom": true,
"zoomProps": {
"type": "popup",
},
"themeProps": {
"primary": "#d0021b",
"onPrimary": "#ffffff",
"active": "#d0021b"
},
"transition": "fade",
"viewportBreakpoints": [{
"breakpoint": 576,
"navigation": "always",
"carouselStyle": "indicators",
"carouselLocation": "bottom",
"onPrimary": "#d0021b",
"navigationProps": {
"iconColor": "#d0021b"
},
"indicatorProps": {
"selectedColor": "#d0021b",
"color": "#E7808D"
}
}]
});
myWidget.render();
</script>
</head>
<body>
<div id="product-gallery" style="max-width:80%;margin:auto">
</div>

</body>

</html>