JSFiddle - React, Tailwind, and code Playground

by nateomardavis

HTML

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script type="text/javascript" src="https://www.patrick-wied.at/static/heatmapjs/assets/js/heatmap.min.js"></script>
   <style>
   
   html, body {
     width:  100%;
     height: 100%;
     -webkit-print-color-adjust: exact;
  }
    
  html { 
    color: #333;
    font-family: sans-serif;
    font-size: 16pt;
    font-weight: 100;
    line-height: 1.5em;
  }

.heatmap {
    /*background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Soccer_Field_Transparant.svg/1200px-Soccer_Field_Transparant.svg.png');*/
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position:relative;
  }

.backgroundIMG {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Soccer_Field_Transparant.svg/1200px-Soccer_Field_Transparant.svg.png');
    background-size: contain;
    background-repeat: no-repeat;
    position:absolute;
    width: 100%;
    height: 0;
    padding-top: 151.33%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
}


@media only screen and (max-width: 600px){
  body{
    transform: scale(.67);
  }
}

  </style>
  

  
  </head>
  
 <body>
   <button class="clear">Clear</button>
   <button onclick="printPage()" class="print-btn no-print" style="">Print</button>
   <p id="coords"></p>
   <div class="backgroundIMG"></div>
   <div id="heatmap" class = "heatmap" style="position: relative;">  <!--  blue box on web app-->
      <!--<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Soccer_Field_Transparant.svg/1200px-Soccer_Field_Transparant.svg.png" class="background">-->
   </div>

<script>
   
    
//CREATE HEATMAP
  window.onload = function() {
    var heatmapInstance = h337.create({
      container: document.querySelector('.heatmap'),
      gradient: {
        '.25': 'black',
        '.5': 'red',
        '.75': 'white'
      },
      radius: 20
  ...