JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-fluid">
  
<div class="row row-centered">

<div class="col-md-4"></div>  
 <!-- This is a div containing divs for each channel --> 
<div class="col-md-4 col-centered" id="displayHere">
 
  
</div>
 <!-- The container div end here -->
<div class="col-md-4"></div>  
  
</div>  
  
</div>

JavaScript

//"https://api.twitch.tv/kraken/streams/channel?callback=?"
//if "stream"=null, channel is offline
//if .hasOwnProperty("error") then channel is unavailable
//if "stream" is not null, channel is displaying stream.game
 
$(document).ready(function(){
streamsArr=["ESl_SC2","OgamingSC2","cretetion","freecodecamp","storbeck","habathcx","RobotCaleb","noobs2ninjas","brunofin","comster404"];
  
  for(var count=0;count<streamsArr.length;count++){
 $.getJSON("https://api.twitch.tv/kraken/streams/"+streamsArr[count]+"?callback=?",function(data){
   
   if(JSON.stringify(data.stream)=="null")
     {
       $("#displayHere").append("<div style=\"padding:1%;\"><span style=\"font-size:1.3em;\"> "+streamsArr[count]+"</span><span style=\"color:red;\">OFFLINE</span></div>");
     }
   else if(data.hasOwnProperty("error"))
     {
       $("#displayHere").append("<div style=\"padding:1%;\"><span style=\"font-size:1.3em;\"> "+streamsArr[count]+"</span><span style=\"color:red;\">UNAVAILABLE</span></div>");
     }
   else{
   $("#displayHere").append("<div style=\"padding:1%;\"><span style=\"font-size:1.3em;\"> "+JSON.stringify(data.stream.channel.display_name)+"</span>"+JSON.stringify(data.stream.game)+"</div>");
   }
 }); 
  } 
});