JSFiddle - React, Tailwind, and code Playground

by p337

HTML

<div id="StackOverflow">
  <h4><a id="SOURL" href="">StackOverflow Name</a></h4>
  <p>Total Rep: <span id="SORep"></span></p>
  <table id="SOMedals">
    <tr>
      <td>🥇</td>
      <td id="SOGold">0</td>
    </tr>
    <tr>
      <td>🥈</td>
      <td id="SOSilver">0</td>
    </tr>
    <tr>
      <td>🥉</td>
      <td id="SOBronze">0</td>
    </tr>
  </table>
</div>

<div id="GitHub">
<h4><a id="GHURL" href="">GitHub Name</a></h4>
<table id="GHRepos">

</table>
</div>

JavaScript

soURL = 'https://api.stackexchange.com/2.2/users/2000557?site=stackoverflow';
var SO = {};
$.get(soURL, function(data) {
  if (data && data.items && data.items.length === 1) {
    profile = data.items[0];
    SO.name = profile.display_name;
    SO.link = profile.link;
    SO.rep = profile.reputation;
    SO.gold = profile.badge_counts.gold;
    SO.silver = profile.badge_counts.silver;
    SO.bronze = profile.badge_counts.bronze;

    $('#SOURL').attr('href', SO.link);
    $('#SOURL').text(SO.name);
    $('#SORep').text(SO.rep);
    $('#SOGold').text(SO.gold);
    $('#SOSilver').text(SO.silver);
    $('#SOBronze').text(SO.bronze);
  }
}).fail(function() {
  $('#StackOverflow').html('<p>Error Loading SO Profile - <a href="https://stackoverflow.com/users/2000557/gray">Direct Link</a></p>');
});

ghURL = 'https://api.github.com/users/pmood';
var GH = {};
$.get(ghURL, function(data) {
  if (data) {
    GH.name = data.login;
    GH.url = data.html_url;
    GH.repo_count = data.public_repos;
  }
});
$.get(ghURL + '/repos', function(data) {
  if (data) {
    GH.repos = [];
    for (var i = 0; i < data.length; i++) {
      var repo = {};
      repo.name = data[i].name;
      repo.description = data[i].description;
      repo.url = data[i].html_url;
      repo.lang = data[i].language;
      GH.repos.push(repo);
    }
  }
  $('#GHURL').attr('href', GH.url);
  $('#GHURL').text(GH.name);
  GH.repos.forEach(function(repo) {
  	addGHRow(repo);
  })
}).fail(function() {
  $('#GitHub').html('<p>Error Loading GitHub Profile - <a href="https://github.com/pmood">Direct Link</a></p>');
});

function addGHRow(repo){
	var table = $('#GHRepos');
  var row = document.createElement('tr');
  var name = document.createElement('td');
  var link = document.createElement('a');
  var desc = document.createElement('td');
  
  $(link).attr('href', repo.url);
  $(link).text(repo.name + " (" + repo.lang +")");
  $(desc).text(repo.description);
  $(name).html(link);
  $(row).html(name);
 ...