JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="report-card treehouse"></div>
<div class="report-card codeschool"></div>

CSS

.treehouse-badges { text-align: center }
#badge .more-badges a { font-weight: bold !important }
.badges li img,
#codeSchool-count img,
.more-badges a {
    width: 100%;
    text-align: center;
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), to(rgba(255,255,255,0.2)));
}
#codeSchool-badges img { -webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), to(rgba(255,255,255,0.2))) }
.more-badges { position: relative }
.more-badges span { vertical-align: middle }
.more-badges,
.more-badges a {
    color: rgb(24, 24, 24);
    text-decoration: none;
}
.back-image {

}
.more-badges span:hover,
.more-badges a:hover {
    opacity: 1;
    color: #000;
}
.tooltip.in { opacity: .9 }
#codeSchool-badges li,
#codeSchool-enrolledbBadges li {
    width: 70px;
    display: inline-block;
}
/* ===[ Custom Styles by Riley ]===
   ================================================== */
/* ===[ Tree House Chart ]===
   ================================================== */
#treehouseBadgeChartHolder {
    width: 1200px;
    margin: 0 auto;
}
.badgesChart {
    list-style: none;
    padding-left: 0px;
    clear: both;
    padding-top: 10px;
    text-align: center;
}
.ChartKey {
    list-style: none;
    padding-left: 0px;
}
.ChartKey li {
    float: left;
    padding-right: 20px;
}
.ChartKey span {
    height: 20px;
    width: 20px;
    display: block;
    float: left;
    margin-right: 5px;
}
/* ===[ Badges CSS ]===
   ================================================== */
/* ===[ Controls width of the widget ]===
   ================================================== */
.badge-container {
    width: 700px;
    margin: 0 auto;
}
/* ===[ Makes Badges display inline ]===
   ================================================== */
.badges li {
    display: inline-block;
    margin: 2px;
}
.report-card { text-align: center }
.badges {
margin:...

JavaScript

var calcHeight;

calcHeight = function() {
  var $more;
  $more = $(".more-badges a");
  $.each($more, function() {
    var height;
    height = $(this).parent().parent().find("li:first-child img").height();
    $(this).height(height).css("line-height", height + "px");
  });
};

(function($) {
  $.fn.reportCard = function(options) {
    var calcDate, calculateTreehouseDemensions, codeschoolReportCard, firstImageLoad, gif, numberWithCommas, reloadTips, settings, treehouseReportCard;
    numberWithCommas = function(x) {
      return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    };
    calcDate = function(date) {
      var monthNames;
      monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
      return monthNames[date.getMonth()] + " " + date.getDate() + ", " + date.getFullYear();
    };
    firstImageLoad = function() {
      var $images, counter, imageCount;
      $images = $(".badges img");
      imageCount = $images.length;
      counter = 0;
      $images.one("load", function() {
        counter++;
        if (counter === imageCount) {
          calcHeight();
        }
      }).each(function() {
        if (this.complete) {
          $(this).trigger("load");
          calcHeight();
        }
      });
    };
    reloadTips = function() {
      $(".progress div, .badges img, .more-badges a").tooltip();
    };
    calculateTreehouseDemensions = function() {
      $.each($(".report-card.treehouse"), function() {
        var widgetWidth;
        widgetWidth = $(this).width();
        if (widgetWidth > 899) {
          $(this).find(".more-badges").css("font-size", "45px");
          $(this).find("h1").css({
            "font-size": "3em",
            "line-height": "1.2em"
          });
        } else if (widgetWidth > 579) {
          $(this).find(".more-badges").css("font-size", "30px");
          $(this).find("h1").css({
            "font-size": "2em",
           ...