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>getting maps to update form info</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: "869c4c86fb811ada",
    center: {
      lat: 39.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 google.maps.places.Autocomplete(autocompleteInput, {
    fields: ["address_components", "geometry", "name"],
    types: ["address"],
  })

  //console.log(autocompleteInput.value);

  autocomplete.addListener("place_changed", function () {
    marker0.setVisible(true)
    //add...