JSFiddle - React, Tailwind, and code Playground

by jasper

HTML

<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>


<body>
<div id="wrapper">
    <div id="mask">
 <div id="item1" class="item">


        <div class="content">


            <a href="#item2" class="panel">

            <video id="my_Video" width="100%" height="100%" preload="auto" autoplay loop>xxxxxx
            </video>

            </a>

        </div>
       </div>



      <div id="item2" class="item">

       <div class="content">    
          <div id="back">

          <ul id="awesome-menu">

            <li>  

                   <a href="#item3"  onclick="abcSubmit()" id="abc" class="panel">ABC</a>

            </li>   

            <li>

              <a href="#item3" onclick="nationalSubmit()" id="national" class="panel">National</a>


            </li>   

            <li>

                   <a href="#item3" onclick="otherSubmit()" id="other" class="panel">Other</a>

            </li>       

          </ul>

        </div>

    </div>
   </div>

       <div id="item3" class="item">

            <div class="content">
                 <img src="images/thankyou.jpg" alt="Thank you" /><a href="#item1" class="panel" style="display:none;"></a></div>
       </div>

 
    </div>
</div>

</body>

CSS

body {
    height:100%;
    width:100%;
    margin:0;padding:0;
}

#pageLayover{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:transparent;
  z-index:9000;
  display:block;
}

 
#wrapper {
    width:100%;
    height:100%;
    position:absolute;
    top:0;left:0;
    background-color:#ccc;
    overflow:hidden;
}
    #mask {
        width:500%;
        height:100%;
 
        background-color:#eee;
    }
 
    .item {
        width:20%;
        height:100%;
        float:left;
        background-color:#ddd;
        position:relative;
    }
     
     
    .content {
        width:400px;
        height:300px;
        top:20%;
        margin:0 auto;
        background-color:#aaa;
        position:relative;
    }
     
    .selected {
        background:#fff;
        font-weight:700;
    }
 
    .clear {
        clear:both;
    }

JavaScript

$(document).ready(function() {
    
    $("#item1").append('<div id="pageLayover"></div>');
    $(document).mousemove(function(){ //capture mouse movement event
      $("#pageLayover").remove(); // remove our layover from the DOM
    });
    
    var $panels = $('a.panel'),
        timer   = null;
 
    //get all link with class panel
    $panels.click(function () {
        
        clearTimeout(timer);
        timer = null;
        
        var $this = $(this);
        console.log($this.attr('href'));
        if ($this.attr('href') == '#item2') {
            timer = setTimeout(function () {
                $panels.filter('[href="#item1"]').trigger('click');
            }, 5000);
        } else if ($this.attr('href') == '#item3') {
            timer = setTimeout(function () {
                $panels.filter('[href="#item1"]').trigger('click');
            }, 3000);
        }
 
                //reset and highlight the clicked link
        $('a.panel').removeClass('selected');
        $(this).addClass('selected');
         
        //grab the current item, to be used in resize function
        current = $(this);
         
                //scroll it to the destination
        //$('#wrapper').scrollTo($(this).attr('href'), 800);     
        $('#wrapper').scrollTo($(this).attr('href'), 800,{
            onAfter: function(id){
                $("#item1").append('<div id="pageLayover"></div>');
                //if (id === '#item3'){
                //    setTimeout(function(){
                //        $(id).find('.panel').click();
                //    }, 3000);
                //}
            }
        });
         
                //cancel the link default behavior
        return false;
    });
 
 
    //resize all the items according to the new browser size
    $(window).resize(function () {
         
        //call the resizePanel function
        resizePanel();
    });
     
});


function resizePanel() {
 
    //get the browser width and height
    width =...