JSFiddle - React, Tailwind, and code Playground

by khamer

CSS

body {
  text-align: left;
}

div {
  font-family: arial;
  font-weight: bold;
  display: inline-block;
  width: 100px;
  line-height: 20px;
  padding: 30px 0;
  margin: 10px;
  text-align: center;
  border-radius: 10px;
}

JavaScript

$(function() {
  var colors = 'EMC #f11e22, Gold #f7c12d, RSA #2c94dd, BG #f2f2f2, Text #444444, Highest #20ae52, 5 #00875e, 4 #0e8eae, 3 #808080, 2 #bea778, 1 #f6ab00, 0 #f27d41, Lowest #c8c8c8'.split(', ');
  for (var i = 0; i < colors.length; i++) {
    var pair = colors[i].split(' #');
    var label = pair[0];
    var color = '#' + pair[1];
    $('<div style="background: ' + color + ';">' + label + "<br />" + color + '</div>').appendTo('body');
  }
});