JSFiddle - React, Tailwind, and code Playground

by grant

HTML

<h2 id="namo"></h2> 
<p id="tcase"></p>
    <h3 id="flow">
     
    </h3>
    <h4>ft3/s</h4>
   <h5>
   
   </h5>
    <div class="wrapper"><div class="wave"> </div>
      
    </div>

CSS

body {
  background: #ffffff;
  padding: 20px;
  font-family: Helvetica;
}

#tcase {
  text-transform: lowercase;
  text-transform: capitalize;
}

  .wave {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -25%;
    left: 50%;
    margin-left: -500px;
    margin-top: -900px;
    border-radius: 35%;
    background: rgba(255, 255, 255, 0.75);
    -webkit-animation: wave 15s infinite linear;
            animation: wave 15s infinite linear;
  }
  
  @-webkit-keyframes wave {
    from {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
    from {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }
  
  @keyframes wave {
    from {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
    from {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }
  
  @keyframes fadeup {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes footerfadeup {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.7;
    }
}

JavaScript

// find elements
 $.getJSON(
        "https://waterservices.usgs.gov/nwis/iv/?format=json&sites=13206000&parameterCd=00060",
        function (data) {
          var cfs = (data.value.timeSeries[0].values[0].value[0].value);
          console.log(data.value.timeSeries[0].sourceInfo.siteName);
          var site = (data.value.timeSeries[0].sourceInfo.siteName);
          //console.log({site})
          var str = site.split(' ').slice(0,4).join(' ');


// 
var site1 = str.split(' ')
   .map(w => w[0].toUpperCase() + w.substr(1).toLowerCase())
   .join(' ')

console.log(site1)



          $("body h3").text(data.value.timeSeries[0].values[0].value[0].value);
          $("body h5").text(data.value.timeSeries[0].values[0].value[0].value);
     //  $("body h2").text(data.value.timeSeries[0].sourceInfo.siteName);
    //      document.getElementById("namo").innerHTML = (site);
          document.getElementById("tcase").innerHTML = (site1);
        }
      );

      setInterval(function () {
        random = Math.floor(Math.random() * 1 + 1);
        var plusOrMinus = Math.random() < 0.15 ? -0.1 : 0.7;
        random = random * plusOrMinus;
        currentnumber = document.getElementById("flow");

        document.getElementById("flow").innerHTML =
          parseInt(currentnumber.innerHTML) + random;
      }, 3000);