JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.0.2/jquery.simpleWeather.min.js"></script>
<script src="http://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-Ru"></script>
<div id="weather"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/loader.gif" alt="Loading..." class="loading"><br />Загрузка...</div>

CSS

@font-face {
    font-family: 'weather';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot');
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
  padding: 25px 0;
  font: 13px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  background: #fff;
}

.loading {
  margin: 65px 0 0;
}

#weather {
  width: 350px;
  margin: 0px auto;
  text-align: center;
  text-transform: uppercase;
}

#weather h1 {
  display:inline-block;
  margin: 0;
  color: #5bc0de;
  font-family: weather;
  font-size: 150px;
  font-weight: normal;
  line-height: 1.0;
}

#weather h1.icon-0:before { content: ":"; }
#weather h1.icon-1:before { content: "p"; }
#weather h1.icon-2:before { content: "S"; }
#weather h1.icon-3:before { content: "Q"; }
#weather h1.icon-4:before { content: "S"; }
#weather h1.icon-5:before { content: "W"; }
#weather h1.icon-6:before { content: "W"; }
#weather h1.icon-7:before { content: "W"; }
#weather h1.icon-8:before { content: "W"; }
#weather h1.icon-9:before { content: "I"; }
#weather h1.icon-10:before { content: "W"; }
#weather h1.icon-11:before { content: "I"; }
#weather h1.icon-12:before { content: "I"; }
#weather h1.icon-13:before { content: "I"; }
#weather h1.icon-14:before { content: "I"; }
#weather h1.icon-15:before { content: "W"; }
#weather h1.icon-16:before { content: "I"; }
#weather h1.icon-17:before { content: "W"; }
#weather h1.icon-18:before { content: "U"; }
#weather h1.icon-19:before {...

JavaScript

$(document).ready(function() {
  $.simpleWeather({
    location: ymaps.geolocation.city,
    woeid: '',
    unit: 'c',
    success: function(weather) {
      html = '<h1 class="icon-'+weather.code+'"></h1>&nbsp;&nbsp;<h2>'+weather.temp+'&deg;'+weather.units.temp+'</h2>';
      html += '<ul><li>'+ymaps.geolocation.city+'</li>';
      html += '<li>'+weather.currently+'</li>';
      html += '<li>'+weather.wind.direction+' '+weather.wind.speed+' '+weather.units.speed+'</li></ul>';

      $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('<p>'+error+'</p>');
    }
  });
});