JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.StyleColor - 360 Spinner</title>
    <style>
        body {
            display: table;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
        }

        .middle {
            display: table-cell;
            vertical-align: middle;
        }

        .widget360 {
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
    <div class="middle">
        <div id="my-gallery" class="widget360"></div>
    </div>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default%2CObject.values%2CArray.prototype.find%2Cfetch%2CArray.prototype.includes"></script>
    <script src="https://product-gallery.cloudinary.com/all.js" type="text/javascript"></script>

    <script type="text/javascript">
        const myGallery= cloudinary.galleryWidget({
	        container: "#my-gallery",
	        cloudName: "gimg2",
            carouselStyle: "none",
            SortProps: "none",
	        mediaAssets: [{
		        tag: "LFA-22_h1-360-234331-10-81",
		        mediaType: "spin",
            
	        }],
          	spinProps:{
            	spinDirection:"clockwise",
            },
            aspectRatio: "16:9",
        });
        myGallery.render();
    </script>
</body>
</html>