JSFiddle - React, Tailwind, and code Playground

by ChippeRock

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="PopUp" class="overlay">
        <div class="PopUp">
		<div class="timer" id="timer"><img src="http://i.imgur.com/87XaOWA.png"><p class="close-message" id="close-message"></p></div>

            <a class="close" href="#">&#10005;</a>
            <div class="content">
<div id="p1" class="p1" style="overflow: hidden; position: relative; width: 885px; height: 878px;">

   <!-- Begin page background -->
<div id="pg1Overlay" style="width:100%; height:100%; position:absolute; z-index:1; background-color:rgba(0,0,0,0); -webkit-user-select: none;"></div>
<div id="pg1" class="pg1" style="-webkit-user-select: none;"><img src="http://i.imgur.com/vcY42CW.png" id="pdf1" class="pdf1"></img></div>
   <!-- End page background -->


<!-- Begin text definitions (Positioned/styled in CSS) -->
<div id="t1_1" class="t s1_1">Player Selection Criteria Evaluator Cue Card</div>
<div id="t2_1" class="t s2_1">Skating – speed, quickness, technique</div>
<div id="t3_1" class="t s3_1">♦</div>
<div id="t4_1" class="t s4_1">Forward and Backward</div>
<div id="t5_1" class="t s3_1">♦</div>
<div id="t6_1" class="t s3_1">♦</div>
<div id="t7_1" class="t s3_1">♦</div>
<div id="t8_1" class="t s4_1">Turn both directions</div>
<div id="t9_1" class="t s4_1">Stop both directions</div>
<div id="ta_1" class="t s4_1">Are they in a good position for stability and strength</div>
<div id="tb_1" class="t s2_1">Passing – technique, control, vision</div>
<div id="tc_1" class="t s3_1">♦</div>
<div id="td_1" class="t s3_1">♦</div>
<div id="te_1" class="t s3_1">♦</div>
<div id="tf_1" class="t s3_1">♦</div>
<div id="tg_1" class="t s4_1">Forehand and Backhand</div>
<div id="th_1" class="t s4_1">To moving and stationary target</div>
<div id="ti_1" class="t s4_1">Vision – do they take a look and select best option</div>
<div id="tj_1" class="t s4_1">Advanced – board passes, chips, saucer passes</div>
<div id="tk_1"...

CSS

.t {
        -webkit-transform-origin: top left;
        -moz-transform-origin: top left;
        -o-transform-origin: top left;
        -ms-transform-origin: top left;
        -webkit-transform: scale(0.25);
        -moz-transform: scale(0.25);
        -o-transform: scale(0.25);
        -ms-transform: scale(0.25);
        z-index: 2;
        position: absolute;
        white-space: pre;
        overflow: visible;
    }

    #t1_1{left:256px;top:35px;letter-spacing:0.1px;}
    #t2_1{left:334px;top:87px;word-spacing:-0.1px;}
    #t3_1{left:210px;top:123px;}
    #t4_1{left:238px;top:123px;word-spacing:-0.3px;}
    #t5_1{left:210px;top:141px;}
    #t6_1{left:210px;top:160px;}
    #t7_1{left:210px;top:179px;}
    #t8_1{left:238px;top:141px;letter-spacing:-0.1px;word-spacing:-0.1px;}
    #t9_1{left:238px;top:160px;word-spacing:-0.1px;}
    #ta_1{left:238px;top:179px;word-spacing:-0.1px;}
    #tb_1{left:343px;top:242px;letter-spacing:-0.1px;}
    #tc_1{left:210px;top:278px;}
    #td_1{left:210px;top:297px;}
    #te_1{left:210px;top:315px;}
    #tf_1{left:210px;top:334px;}
    #tg_1{left:238px;top:278px;word-spacing:-0.1px;}
    #th_1{left:238px;top:297px;word-spacing:-0.1px;}
    #ti_1{left:238px;top:315px;word-spacing:-0.2px;}
    #tj_1{left:238px;top:334px;word-spacing:-0.1px;}
    #tk_1{left:286px;top:393px;word-spacing:-0.1px;}
    #tl_1{left:210px;top:429px;}
    #tm_1{left:210px;top:448px;}
    #tn_1{left:210px;top:466px;}
    #to_1{left:210px;top:485px;}
    #tp_1{left:238px;top:429px;word-spacing:-0.3px;}
    #tq_1{left:238px;top:448px;word-spacing:-0.1px;}
    #tr_1{left:238px;top:466px;word-spacing:-0.1px;}
    #ts_1{left:238px;top:485px;word-spacing:-0.2px;}
    #tt_1{left:326px;top:544px;letter-spacing:-0.1px;}
    #tu_1{left:210px;top:580px;}
    #tv_1{left:210px;top:599px;}
    #tw_1{left:210px;top:618px;}
    #tx_1{left:238px;top:618px;}
    #ty_1{left:210px;top:636px;}
    #tz_1{left:238px;top:636px;}
    #t10_1{left:210px;top:655px;}
   ...

JavaScript

$(document).ready(function() {
    $(document).keypress(function(e){
        if(e.charCode === 65 || 103) {
             $('#PopUp').css("visibility", "visible"); 
             $('#PopUp').css("opacity", 1); 
        }
    });
    $(function(){
  
       $('#PopUp').css("visibility", "visible"); 
       $('#PopUp').css("opacity", 1); 
  
       });
  
  $( ".close" ).click(function() {

       $('#PopUp').css("visibility", "hidden"); 
       $('#PopUp').css("opacity", 0);
    });
});

        function printDiv()
        {
            var content = document.getElementById('content').innerHTML;
            var win = window.open();
            win.document.write(content);
            win.print();	// JavaScript Print Function
            win.close();	//It will close window after Print.
        }

  var counter = 60; 
  var setMsg = setInterval(function() {
    counter--;
    if(counter >= 60) {
      $("#close-message").html("1:00");
    } else if(counter >= 10) {
      $("#close-message").html("0:" + counter);
        } else if (counter > 0) {
      $("#close-message").html("0:0" + counter);
    } else {
      $( ".close" ).click(function() {
        $('#PopUp').css("visibility", "hidden"); 
        $('#PopUp').css("opacity", 0);
      });
      $("#timer").remove();
      clearInterval(setMsg);
    }
  }, 1000);
  
});