JSFiddle - React, Tailwind, and code Playground

by unknown601

HTML

<div class="sfk-wrapper">
  <div class="sfk-viewer-wrap-fallback"><img src="http://katshelving.avid.business/3d-viewer/fallback.jpg" width="100%" height="auto" alt=""/></div>
  <div class="sfk-viewer-wrap">
    <div class="sfk-viewer-container"><img src="http://katshelving.avid.business/3d-viewer/viewerbackground.png" width="100%" height="auto" alt=""/>
      <iframe src="" id="api-frame" allow="autoplay; fullscreen; vr" allowvr allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
    </div>
  </div>
  <br>
  <div class="sfk-buttons">
    <button id="first">Show</button>
    <button id="second">Hide</button>
    <button id="forth" onclick="previous()"><i class="fa fa-caret-left" style="font-size:29px;color:white"></i> </button>
    <button id="third" onclick="next()"><i class="fa fa-caret-right" style="font-size:29px;color:white"></i></button>
    <button id="fifth">Close</button>
    <button id="sixth">Open</button>
    <button id="top">top</button>
    <button id="back">back</button>
    <button id="left">left</button>
    <button id="right">right</button>
  </div>
  <p id="notloading">Not Loading? Click Here</p>
</div>


<script type="text/javascript">
    var iframe = document.getElementById( 'api-frame' );
    var uid = 'ee108eaa90db44f693d951d41c102cc7';

    // By default, the latest version of the viewer API will be used.
    var client = new Sketchfab( iframe );

    // Alternatively, you can request a specific version.
    // var client = new Sketchfab( '1.5.1', iframe );

    client.init( uid, {
        success: function onSuccess( api ){
            api.start();
			
			
            api.addEventListener( 'viewerready', function() {

                // API is ready to use
                // Insert your code here
                console.log( 'Viewer is ready' );

            } );
        },
        error: function onError() {
            console.log( 'Viewer error' );
        }
    } );
    </script> 
<script>   	
	
	var click...

CSS

.sfk-viewer-container iframe {
	width: 100%;
	height: 100%;
	border: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.sfk-wrapper{
	width: 100%;
	margin: 0 auto;	
	max-width: 1400px;
}
.sfk-viewer-wrap{
	position: relative;
	width: 100%;
	height: auto;
	border: none;
	/*pointer-events: none;*/	
}
.sfk-viewer-wrap-fallback{
	display: none;
	
}
.sfk-viewer-container {
	width: 100%; 
	position: relative;
	overflow: hidden;
}
/* Button style */
.sfk-buttons {
	position: relative;
	width: 100%;
	z-index: 1;
	 display: flex;
  align-items: center;
  justify-content: center;
	padding-bottom: 15px;
}
.sfk-buttons button {
	width: 110px;
	height: 30px;
	line-height: 21px;
	text-transform: uppercase;
	color: white;
	border: none;
	margin-right: 2.5px;
	margin-left: 2.5px;
	border-radius: 5px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	outline: none;
	-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
	background: #0b87c6;
	
}
.sfk-buttons button:hover {
	-webkit-box-shadow: 0 0 3px 0 #111;
box-shadow: 0 0 3px 0 #111;
		background: rgba(145,153,216,1.00);
	
}
.sfk-buttons button:active {
		background: rgba(50,50,100,1.00);
	
}
#notloading {
	color: #999;
	cursor: pointer;
}
#notloading:hover {
	color: blue;
}
@media only screen and (max-width : 600px) {
.sfk-buttons {
	display: none;
	
}
}