JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<div class="temp"></div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,600,400);

@-webkit-keyframes colorPulse {
    0% {background-color: #F55858;}
    10% {background-color: #F558E8;}
    20% {background-color: #7258F5;}
    30% {background-color: #5894F5;}
    40% {background-color: #4CD978;}
    50% {background-color: #80E352;}
    60% {background-color: #B5E352;}
    70% {background-color: #E3D752;}
    80% {background-color: #E3AB52;}
    90% {background-color: #E38552;}
}
body {
    background-color:#F55858;
    -webkit-animation-name: colorPulse;
    -webkit-animation-duration: 60s;
    -webkit-animation-iteration-count: infinite;
    /* -webkit-animation-direction: alternate; 
    -webkit-animation-fill-mode: forwards; */
}
.temp {
    font-size:105px;
    color:white;
    font-family:'Open Sans';
    font-weight:600;
    text-shadow:2px 2px 7px rgba(0,0,0,0.3);
    width:100%;
    text-align:center;
}

JavaScript

var json;

function getWeather() {
    $.getJSON( "http://api.openweathermap.org/data/2.5/weather?q=Grand+Rapids,MI&units=imperial", function( data ) {
        json = data;
        $(".temp").html(Math.round(json.main.temp) + "&#176;");
    });
    window.setTimeout(60000, function(){ getWeather() });
}

getWeather();