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="mainimageDiv" style="height:500px;margin:auto"></div>

<script type="text/javascript">
  const myWidget = cloudinary.galleryWidget({
    container: "#mainimageDiv",
    cloudName: "env-cloud",
    mediaAssets: [
      {publicId: "shopimages/products/1200/BP165100M.jpg",transformation: { crop: "fill" ,gravity:"center"}},
      {publicId: "shopimages/products/1200/BP165100M_back.jpg"},
      {publicId: "shopimages/products/1200/BP165100W.jpg"}
    ]
  });

  myWidget.render();
</script>