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>Fine Line Auto Body Shop | Collision Repair | Columbus Ohio.</title>
<meta name="description" content="Fine Line Auto Body Shop specializes in collision repair servicing all of Columbus Ohio. Call us today 1(614) 258-5555 for free estimate." />
<meta name="keywords" content="Body Shop, Columbus, Ohio, Auto Body Repair, Collision Repair, Free estimate, Columbus Ohio Central Ohio Collision Repair, Auto Body, Truck Body, Van Body, Columbus, Ohio Body Shop" />
<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) {
       ...

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:...