JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <header class="header">
    <div class="search">
      <input type="text" placeholder="Enter City Name" id="search-txt">
      <a id="search-btn" href="#"><i class="fas fa-search"></i></a>
    </div>
  </header>

  <main id="main">
    
    <div class="city-icon">
      <div class="city-icon-holder">
      <div id="city-name"></div>
      <img src="" alt="" id="icon">
        </div>
    </div>
    
    <div class="temperature">
      <div id="temp"></div>
    </div>
    
    <div class="humidity">
      <div id="humidity-div"></div>
    </div>
    
    <div id="output">
        <div id="out"></div>
    </div>
    
  </main>
<script src='https://use.fontawesome.com/releases/v5.0.13/js/all.js'></script>

JavaScript

const appKey = "***";

let searchButton = document.getElementById("search-btn");
let searchInput = document.getElementById("search-txt");
let cityName = document.getElementById("city-name");
let icon = document.getElementById("icon");
let temperature = document.getElementById("temp");
let humidity = document.getElementById("humidity-div");
let output = document.getElementById("out");
let outputHolder = document.getElementById("output");

searchButton.addEventListener("click", findWeatherDetails);
searchInput.addEventListener("keyup", enterPressed);

function enterPressed(event) {
  if (event.key === "Enter") {
    findWeatherDetails();
  }
}

function findWeatherDetails() {
  if (searchInput.value === "")
    return
  let searchLink = "https://api.openweathermap.org/data/2.5/weather?q=" + searchInput.value + "&appid="+appKey;
  
  $.getJSON(searchLink, null, handleWeatherReport);
/*  fetch(searchLink)
  .then(response => {
    if (!response.ok)
      throw new Error('HTTP error, status = ' + response.status);
    return response.json();
  })
  .then(handleWeatherReport); */
}

function handleWeatherReport(jsonObject) {
  cityName.innerHTML = jsonObject.name;
  icon.src = "http://openweathermap.org/img/w/" + jsonObject.weather[0].icon + ".png";
  temperature.textContent = parseInt(jsonObject.main.temp - 273) + "°";
  humidity.textContent = jsonObject.main.humidity + "%";
  var celcius = Math.round(parseFloat(jsonObject.main.temp)-273.15);
  console.log (celcius)
  
  if (celcius <= 23) {
    document.body.style.backgroundColor = '#8181F7';
    document.body.style.color = "#d6f286";
    output.innerHTML = "<p id=\"outputPara\">Zieh dir eine Jacke an!</p>";
  }
  else if (celcius >= 24)
  {
    document.body.style.backgroundColor = '#FFBF00';
    document.body.style.color = "#00588f";
    output.innerHTML = "<p id=\"outputPara\">Zieh dir ein kurzärmliges T-Shirt an!</p>";
  }  
}