JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://darkskyapp.github.io/skycons/skycons.js"></script>
<div id="overlay"></div>

<div id="box" class="box">
    <button id='click1'>Fade Out</button>
<button id='click2'>Fade In</button>
<select id="choice" onchange="updateWeatherDisplay()">
    <option value="Monday">Monday</option>
    <option value="Tuesday">Tuesday</option>
    <option value="Wednesday">Wednesday</option>
    <option value="Thursday">Thursday</option>
    <option value="Friday" selected>Friday</option>
    <option value="Saturday">Saturday</option>
    <option value="Sunday">Sunday</option>
</select>
<h1 id="day"></h1>
<h2 id="temperature"></h2>
<canvas id="condition" width="600" height="300"></canvas>
</div>

CSS

body{
        margin: 0 auto;
        width: 800px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-color: black;
    }
        body.CLEAR_DAY {background-image: url(Clear_Day.jpg);}
        body.PARTLY_CLOUDY_DAY {background-image: url(Sun.jpg);}
        body.FOG {background-image: url();}
        body.SNOW {background-image: url();}
        body.WIND {background-image: url();}
        body.PARTLY_CLOUDY_NIGHT {background-image: url();}
        body.RAIN {background-image: url();}
div.box{
  width:600px;
  height:650px;
  margin:30px 50px;
  background:#3399FF;
      border-bottom: 6px solid #000;
  border-left: 3px solid #000;
  border-right: 3px solid #000;
  border-radius: 0px 0px 50px 50px; 
  border-top:6px solid #000;
  -moz-border-radius:50px 50px;  
  -webkit-border-radius:50px 50px; 
  float:left;
  /*padding:10px;*/
  text-align: center;
  position:relative;
  }
div.box h1
  {
  margin: 0 auto;
  font-weight:bold;
  color:#000;
  font-size:75px;
  text-align: center;
  }
  div.box h2
  {
  margin: 0 auto;
  font-weight:bold;
  color:#000;
  font-size:40px;
  text-align: center;
  }
  div
{
padding:10px 40px; 
background:#dddddd;
width:300px;
border-radius:0px 20px 0px 20px;
}
div.CLEAR_DAY
{
    background-image: url();
    background-position: center;
    background-repeat: no-repeat;
}
div.box canvas
{
  position:absolute;
  top:325px;
  margin-top:-100px;
  left:40px;
}
#overlay
{
    background-color: red;
    opacity:1;
    width:100%;
    height: 100%;
    position:absolute;
    left:0;
    top:0;
}

JavaScript

var skycons = new Skycons({"color": "pink"});
skycons.add("condition", Skycons.CLEAR_DAY);
skycons.play();
var temperatures=["127&#176;","34&#176;","79&#176;","-183&#176;","0&#176;","91&#176;","213&#176;"];
var icons=[Skycons.WIND,Skycons.PARTLY_CLOUDY_NIGHT,Skycons.RAIN,Skycons.CLEAR_DAY,Skycons.PARTLY_CLOUDY_DAY,Skycons.FOG,Skycons.SNOW];
var backgrounds=["WIND","PARTLY_CLOUDY_NIGHT","RAIN","CLEAR_DAY","PARTLY_CLOUDY_DAY","FOG","SNOW"];

function updateWeatherDisplay()
{
var selectedDay = document.getElementById("choice").selectedIndex;
var daysOfTheWeek = document.getElementById("choice").options;
document.getElementById("day").innerHTML = daysOfTheWeek[selectedDay].text;
document.getElementById("temperature").innerHTML = temperatures[selectedDay];
skycons.set("condition", icons[selectedDay]);
document.getElementsByTagName("body")[0].className=backgrounds[selectedDay];
}

function fadeOut()
{
var overlay=document.getElementById("overlay");
var style = window.getComputedStyle(overlay);
var opacity=style.getPropertyValue("opacity");
if(opacity>0){
    console.log('fadeout')
overlay.style.opacity = opacity - 0.01
window.myVar = setTimeout(fadeOut,10);
}
    else{
        console.log('error')
    clearTimeout(myVar)
    }
}
function fadeIn()
{
var overlay=document.getElementById("overlay");
var style = window.getComputedStyle(overlay);
var opacity=style.getPropertyValue("opacity");
if(opacity<1){
    clearTimeout(myVar)
    
overlay.style.opacity = parseFloat(opacity) + 0.01
console.log(overlay.style.opacity)
myVar1 = setTimeout(fadeIn,10);
}
    
}


$('#click1').click(function(){
    
fadeOut()
});
$('#click2').click(function(){
    alert('')
fadeIn()
});