JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<head>
    <style>
    /* Always set the map height explicitly to define the size of the div
     * element that contains the map. */
    #map1 {
    width:95%;
    height:800px;
    border: 3px solid blue;
       margin: 0 auto;
 }
    #map2 {
    width:95%;
    height:800px;
    border: 3px solid green;
       margin: 0 auto;
 }
 





 
 
 #demo{  border: 2px solid yellow;
    display:table;}
 </style>  
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="SHORTCUT ICON" href="images/favicon.ico"/>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

<title>map works here</title>




<script src="https://code.jquery.com/jquery-latest.min.js"></script>

<link rel="stylesheet" href="css/flipcard.css" type="text/css" />
<link rel="stylesheet" href="css/style22.css" type="text/css" />
<script src="js/estimate.js"></script>
    <script>
        
$(document).ready(function() {
$("#mobmenu_hidden").click(function(){
$("#navagation").toggle();

});
});
    $(document).ready(function() {
     $('#blah').removeClass('hidden');

    var $animationElements = $('.animation-element');
    var $window = $(window);

    // ps: Let's FIRST disable triggering on small devices!
     var isMobile = window.matchMedia("only screen and (max-width: 768px)");
    if (isMobile.matches) {
        $animationElements.removeClass('animation-element');
    }

    function checkIfInView() {

        var windowHeight = $window.height();
        var windowTopPosition = $window.scrollTop();
        var windowBottomPosition = (windowTopPosition + windowHeight);

        $.each($animationElements, function () {
            var $element = $(this);
            var elementHeight = $element.outerHeight();
            var elementTopPosition = $element.offset().top;
           ...

CSS

/* all devices*/


#offset {
  animation: letter-flicker 2s linear infinite;
}

@keyframes text-flicker {
  0% {
    opacity:0.1;
    text-shadow: 0px 0px 29px rgba(45, 88, 69, 1);
  }
  
  2% {
    opacity:1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }
  8% {
    opacity:0.1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }
  9% {
    opacity:1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }
  12% {
    opacity:0.1;
    text-shadow: 0px 0px rgba(242, 22, 22, 1);
  }
  20% {
    opacity:1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
  }
  25% {
    opacity:0.3;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
  }
  30% {
    opacity:1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
  }
  
  70% {
    opacity:0.7;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
  }
  
  72% {
    opacity:0.2;
    text-shadow:0px 0px 29px rgba(242, 22, 22, 1)
  }
  
  77% {
    opacity:.9;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
  }
  100% {
    opacity:.9;
    text-shadow: 0px 0px 29px rgba(33, 81, 61, 1)
  }
}

@keyframes letter-flicker {
  0% {
    opacity:0.1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }
  2% {
    opacity:0.1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }
  4% {
    opacity:1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }
  
  
  19% {
    opacity:1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }
  21% {
    opacity:0.1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }
  23% {
    opacity:1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }
  
  80% {
    opacity:1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }
  83% {
    opacity:0.4;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }
  87% {
    opacity:1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }
}


/* desktop devices*/
@media all and (min-width: 701px) {


/*    form    */



#upddd4 {text-align: left;font-weight: bold;border: 1px solid yellow;width:...

JavaScript

//window.onload = initMap;
    let today = new Date();
    let yesterday = new Date();
    let tommorrow = new Date();
    //should be able to shorten and remove bottom 2 lines
    yesterday.setDate(today.getDate() - 1);
    tommorrow.setDate(today.getDate() + 1);

    console.log('Yesterday: ' + yesterday);
    console.log('Today: ' + today);
    console.log('Tommorrow: ' + tommorrow);

    "use strict";
















    function flip() {
      $('.card').toggleClass('is-flipped');
      //document.getElementById('saveFor').disabled = true;
      //document.getElementById('try').disabled = true;
    }

    document.getElementById('saveFor').addEventListener('click', flip);
    document.getElementById('try').addEventListener('click', flip);
  document.getElementById('saveFor').addEventListener('click', initMap);
    function initMap() {
          window.alert('initMap ran');
      document.getElementById('try').addEventListener('click', cnn);
      const componentForm = [
        'location',
        'locality',
        'administrative_area_level_1',
        'country',
        'postal_code',
      ];

      const map1 = new google.maps.Map(document.getElementById("map1"), {
        zoom: 11,
        mapId: '744525hh',
        center: {
          lat: 38.998178,
          lng: -82.998795
        },
        mapTypeControl: false,
        fullscreenControl: true,
        zoomControl: true,
        streetViewControl: true

      }); //map1
//add more markers this way
    //  const usrloc = new google.maps.Marker({
    //    map: map1,
    //    draggable: false,
    //    setZoom: 11,
    //  });
      
      
      
      const marker0 = new google.maps.Marker({
        map: map1,
        draggable: false,
        setZoom: 11,
        icon: {
          url: "https://maps.google.com/mapfiles/ms/icons/blue-dot.png"
        }
      });
      const autocompleteInput = document.getElementById('location');
      const autocomplete = new...