JSFiddle - React, Tailwind, and code Playground

by yuriy636

HTML

<script src="https://cdn.rawgit.com/darkskyapp/skycons/master/skycons.js"></script>
<canvas class="rain" width="128" height="128"></canvas>
<canvas class="partly-cloudy-day" width="128" height="128"></canvas>
<canvas class="partly-cloudy-day" width="128" height="128"></canvas>

JavaScript

var icons = new Skycons({
        "color": "#73879C"
    }),
    list = [
        "clear-day", "clear-night", "partly-cloudy-day",
        "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
        "fog"
    ],
    i;

for (i = list.length; i--;) {
    var weatherType = list[i],
        elements = document.getElementsByClassName(weatherType);
    for (e = elements.length; e--;) {
        icons.set(elements[e], weatherType);
    }
}

icons.play();