JSFiddle - React, Tailwind, and code Playground

by eurica

HTML

<div class="result">

</div>

CSS

.statuses li {
  color: red;
}

li.operational {
  color: green;
}

JavaScript

$.get("https://api.statusbot.io/v1/services/mailgun/components", function(data) {
  window.d = data;
  s = "<h1>" + data.service.human_readable_name + "</h1><ul class='statuses'>"
  for (i = 0; i < d.service.components.length; i++) {
    s += "<li class='" + d.service.components[i].status + "'>" + (d.service.components[i].description || d.service.components[i].name) + ": " + d.service.components[i].status + "</li>"
  }
  s += "</ul>"
  $(".result").html(s);
  console.log(data);
  alert("Load was performed.");
});