JSFiddle - React, Tailwind, and code Playground

by ssoney200

HTML

<div class="container">
         <div id="content" class="content">
         
     
           
            
         </div>
 </div>

CSS

body {
         font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
         background: #42413C;
         margin: 0;
         padding: 0;
         color: #000;
         }
         .container {
         width: 1080px;
         height:1960px;
         background: #FFF;
         margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
         }
         .content {
         padding: 0px 0;
         }

JavaScript

var timeoutID;
          
         function setup() {
             this.addEventListener("mousemove", resetTimer, false);
             this.addEventListener("mousedown", resetTimer, false);
             this.addEventListener("keypress", resetTimer, false);
             this.addEventListener("DOMMouseScroll", resetTimer, false);
             this.addEventListener("mousewheel", resetTimer, false);
             this.addEventListener("touchmove", resetTimer, false);
             this.addEventListener("MSPointerMove", resetTimer, false);
          
             startTimer();
         }
         setup();
          
         function startTimer() {
             // wait 5 seconds before calling goInactive
             timeoutID = window.setTimeout(goInactive, 5000);
         }
          
         function resetTimer(e) {
             window.clearTimeout(timeoutID);
          
             goActive();
         }
          
         function goInactive() {
              document.getElementById("content").innerHTML="<object type='text/html' data='http://bubbleweb.eu/sp-interactive/video.html' ></object>";
			  
         }
          
         function goActive() { 
		
		 
		 	  document.getElementById("content").innerHTML='<div id="home" style="text-align:center; display:block"><img class="logo" src="http://bubbleweb.eu/sp-interactive/images/logo.jpg" /><a class="button" href=""><img src="http://bubbleweb.eu/sp-interactive/images/one-spie.jpg" /></a><a onclick="smart_fm_btn()" class="button" href="#"><img src="http://bubbleweb.eu/sp-interactive/images/smart-fm.jpg" /></a><a class="button" href=""><img src="http://bubbleweb.eu/sp-interactive/images/who-we-are.jpg" /></a></div><div onclick="smart_fm_btn()" style="text-align:center; display:none"><img class="nav" src="http://bubbleweb.eu/sp-interactive/images/nav.jpg" /><img class="logo-inner" src="http://bubbleweb.eu/sp-interactive/images/logo.jpg" /><div class="left"><a id="enegyModal" href="#"><img class="nav"...