JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://fonts.googleapis.com/css?family=Orbitron"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <div class="container">
      <div class="About">
      <h2>Your Local Weather App</h2>
      </div>
      <div class="holder">
        <div class = "btn btn-default" id="city">
        </div>
        <div class = "btn btn-default"  id="weatherType">
        </div>
        <div class = "btn btn-default"  id="fTemp">
        </div>
        <div class = "btn btn-default"  id="windSpeed">
        </div>
      </div>
    </div>

CSS

.container{
  text-align: center;
  background: url("https://s1.postimg.org/14i3xf2um7/Hummer-_H1-_Snow-_Turn-_Headlights-1024x768.jpg") no-repeat fixed;
  background-size: cover;
  background-position: center;
  /*background-color: blue;*/
  width: 100%;
  height: 1000px;
  margin: auto;  
}

.About{
  /*background-color: blue;*/
  /*transform: translateY(650%)*/ 
  position: fixed;
    top:35%;
    left: 0;
    right: 0;
    margin: auto;
}

h2{
  color: white;
  font-size: 1.5em
}

.holder{
  border: 3px;
  background-color: rgba(0, 0, 0, .80);
  width: 55%;
  height: auto;
  position: fixed;
    top:50%;
    left: 0;
    right: 0;
    margin: auto;
  padding-top:  5px;
  padding-bottom: 10px;
  padding-left: 3px;
  padding-right: 3px;
  border: 3px solid grey;
  border-radius: 10px;  
   display: grid;
   grid-template-columns: 1fr;  
   grid-row-gap: 1em;

}

#city, #weatherType,  #fTemp, #windSpeed{
  transform: translateY(9%);
  background-color: #c6c6c4;
  border-bottom:2px inset #FFF;
  border-right:2px inset #FFF;
  border-radius:5px;
  height: 30px;
  width: 90%;
  margin: auto;
  /*padding-bottom: 2px ;*/
}

.btn.btn-default{
  color: #0040ff;
  font-size: .80em;
  font-family: Orbitron, sans-serif;
  line-height: 2.45em;  
}



@media(min-width: 500px){
  .holder{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;  
  }
}

@media(min-width: 500px{

}

JavaScript

$.getJSON("https://freegeoip.net/json/",function(data2){
console.log("1");
console.log(data2);
    var lat = data2.latitude;
    var long = data2.longitude;
		var api = "https://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&appid=b6e4d569d1718b07a44702443dd0ed77";
		$.getJSON(api).done(function(data, dataOther){

        var fTemp;
        var cTemp;
        var tempSwap = true;
console.log("2");
console.log(data);
console.log(dataOther);
        var weatherType = data.weather[0].description;
        var kTemp = data.main.temp;
        var windSpeed = data.wind.speed;
        var city = data.name;
        $("#city").html(city);
        fTemp = (kTemp * (9 / 5) - 459.67).toFixed(2);
        cTemp = (kTemp - 273).toFixed(1);

        $("#api").html(api);
        $("#weatherType").html(weatherType);

        $("#fTemp").html(fTemp + "&#8457;");
        $("#fTemp").click(function() {
            if (tempSwap === false) {
                $("#fTemp").html(fTemp + "&#8457;");
                tempSwap = true;
            } else {
                $("#fTemp").html(cTemp + "&#8451;");
                tempSwap = false;
            }
        });

        $("#windSpeed").html(windSpeed + "m/sec");

		//fTemp = 80; change this to test temp.

    if (fTemp >= 100) {
        $(".container").css("background-image", "url(https://s2.postimg.org/6ss6kyuhl/yamaha_yzf_r1-wallpaper-1024x768.jpg)");
    } else if (fTemp > 90) {
        $(".container").css("background-image", "url(https://s2.postimg.org/lapdsz8y1/beyonce_knowles_2-wallpaper-1024x768.jpg)")
    } else if (fTemp > 80) {
        $(".container").css("background-image", "url(https://s2.postimg.org/i54s2ennd/Beyonce_in_Jamaica.jpg)")
    } else if (fTemp > 70) {
        $(".container").css("background-image", "url(https://s2.postimg.org/t4pzebr0p/golf_course_landscape-wallpaper-1024x768.jpg)")
    } else if (fTemp > 60) {
        $(".container").css("background-image", "url()")
    } else if (fTemp > 50) {
  ...