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>
<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;
}

#weather .icon-weather {
  display:inline-block;
  margin: 0;
  color: #5bc0de;
  font-family: weather;
  font-size: 250%;
  font-weight: normal;
  line-height: 1.0;
}

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

JavaScript

$(document).ready(function() {
  $.simpleWeather({
    location: 'Surgut',
    unit: 'c',
    success: function(weather) {
	  html = 'Сейчас в Сургуте&nbsp;&nbsp;<span class="icon-weather icon-'+weather.code+'"></span>&nbsp;&nbsp;'+weather.temp+'&deg;'+weather.units.temp+'';
      html += '&nbsp;&nbsp;'+weather.currently+'&nbsp;&nbsp;Ветер&nbsp;'+weather.wind.direction+'&nbsp;'+weather.wind.speed+'&nbsp;'+weather.units.speed;

      for(var i=0;i<weather.forecast.length;i++) {
        html += '<p>'+weather.forecast[i].date+'&nbsp;&nbsp;'+weather.forecast[i].day+'&nbsp;&nbsp;';
		html += '<span class="icon-weather icon-'+weather.forecast[i].code+'"></span>&nbsp;&nbsp;Днем '+weather.forecast[i].high+'&deg;'+weather.units.temp+' Ночью '+weather.forecast[i].low+'&deg;'+weather.units.temp+'';
        html += '&nbsp;&nbsp;'+weather.forecast[i].text+'</p>';
      }
	  html = html.replace(/Oct/g,"Окт");

	  html = html.replace(/Tue/g,"Вт");
	  html = html.replace(/Wed/g,"Ср");
	  html = html.replace(/Thu/g,"Чт");
	  html = html.replace(/Fri/g,"Пт");
	  html = html.replace(/Sat/g,"Сб");

	  html = html.replace(/Partly Cloudy/g,"Переменная облачность");
	  html = html.replace(/Light Snow Shower/g,"Небольшой снег");
	  html = html.replace(/Snow Showers/g,"Обильный снег");

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