JSFiddle - React, Tailwind, and code Playground

HTML

<header>Local Weather</header>
<p id="data"></p>

CSS

html {
  background: url(http://s1.picswalls.com/wallpapers/2016/06/06/beach-desktop-background_090607928_305.jpg)center center fixed;
  background-size: cover;
}

header {
  font-family: lobster;
  color: white;
  font-size: 40px;
  text-align: center;
  margin: 40px;
  font-weight: bold;
}

p {
  color: white;
}

JavaScript

$(document).ready(function() {
  var long;
  var lat;

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      long = position.coords.longitude;
      lat = position.coords.latitude;
      $("#data").html("latitude: " + lat + "<br>longitude: " + long);

      var api = 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + long + '&appid=7cc72055cf03c02e9bf988f2a7b7b7e2';
      $.getJSON(api, function(data) {
        alert(data.coord.lon);
        console.log(city);
        console.log(api);
      });
    });
  }
});