JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ul id="menu">

  </ul>
</div>

JavaScript

var JsonVar;
$.getJSON("https://api.myjson.com/bins/1ba5at", function(jsonData) {
  var types = {};
  jsonData.forEach(function(item) {
    if (!types[item.keyword]) {
      types[item.keyword] = 0;
    }
    types[item.keyword]++;
  });

  for (var typeKey in types) {
    var newLiElement = document.createElement("li");
    var valueSpanElement = document.createElement("span");
    var valueTextNode = document.createTextNode(typeKey.toString());
    var keyTextNode = document.createTextNode("keyword: ");
    var countSpanElement = document.createElement("span");
    var countSpanText = document.createTextNode(types[typeKey].toString());
    
    //here you can style the keys
    valueSpanElement.setAttribute("style", "background-color: blue; color: white;");
    countSpanElement.setAttribute("style", "margin-left: 10px; background-color: black; color: white; text-weight: bold;");

    countSpanElement.appendChild(countSpanText);

    valueSpanElement.appendChild(valueTextNode);
    
    newLiElement.appendChild(keyTextNode);
    newLiElement.appendChild(valueSpanElement);
    newLiElement.appendChild(countSpanElement);
    
    
    document.getElementById("menu").appendChild(newLiElement);
  }
});