JSFiddle - React, Tailwind, and code Playground

HTML

This is an un-merged open PR.

<div class="github-button" url="https://github.com/Terasology/AdventureAssets/pull/14"></div>

This is a merged PR.

<div class="github-button" url="https://github.com/MovingBlocks/Terasology/pull/2994"></div>

This is an open issue.

<div class="github-button" url="https://github.com/Terasology/WildAnimals/issues/7"></div>

This is a closed issue.

<div class="github-button" url="https://github.com/Terasology/Books/issues/5"></div>

CSS

*,
*:before,
*:after {
  box-sizing: border-box;
}

a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}

.github-button {
  display: block;
  position: relative;
  padding: .75em 5em .75em 1em;
  border-radius: .25em;
  margin-bottom: .5em;
  background: #fff;
}

.open-PR-button {
    box-shadow:
    0 .0625em .125em rgba(0, 0, 0, .125),
    inset 0 -.25em 0 -.125em rgba(0, 0, 0, .125),
    inset 7.5em 0 0 -.7em rgba(20, 160, 0, .8),
    inset -4em 0 0 -.3em rgba(20, 160, 0, .8);
}

.merged-PR-button {
    box-shadow:
    0 .0625em .125em rgba(0, 0, 0, .125),
    inset 0 -.25em 0 -.125em rgba(0, 0, 0, .125),
    inset 7.5em 0 0 -.7em rgba(30, 144, 255, .5),
    inset -4em 0 0 -.3em rgba(30, 144, 255, .5);
}

.open-issue-button {
  box-shadow:
    0 .0625em .125em rgba(0, 0, 0, .125),
    inset 0 -.25em 0 -.125em rgba(0, 0, 0, .125),
    inset 7.5em 0 0 -.7em rgba(20, 160, 0, .5),
    inset -4em 0 0 -.3em rgba(20, 160, 0, .5);
}

.closed-issue-button {
  box-shadow:
    0 .0625em .125em rgba(0, 0, 0, .125),
    inset 0 -.25em 0 -.125em rgba(0, 0, 0, .125),
    inset 7.5em 0 0 -.7em rgba(178, 34, 34, .8),
    inset -4em 0 0 -.3em rgba(178, 34, 34, .8);
}

.number {
  position: absolute;
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 24pt;
  height: 4em;
  width: 3.6em;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  left: .125em;
  top: 0.5em;
  color: #000;
}

.number:hover {
  font-weight: bold;
  color: #000;
}

.title {
  margin-left: 6em;
  display: block;
  font-size: 14pt;
  font-weight: bold;
  color: #000;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.title:after {
  content: '';
  display: block;
  height: 0;
  width: 100%;
}

.meta {
  display: block;
  margin-left: 7em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 12pt;
  line-height: 2; /* 16 "px" */
  font-weight: bold;
  color: #2f4f4f;
}

.repo...

JavaScript

$(function() {
	$('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.css" type="text/css" />');
    createButtons();
});

function createButtons() {
	$('.github-button').each(function(i, button) {
		var url = $(button).attr("url");
    	var params = url.split("/");
    	var owner = params[3];
    	var repo = params[4];
    	var num = params[6];

    	if (url.indexOf("pull") !== -1) {
    		url = "https://api.github.com/repos/" + owner + "/" + repo + "/pulls/" + num;
    		$.get(
			    url,
			    function(data) {
			    	var date = formatDate(new Date(data.created_at));
			        $(button).append(
			       	$('<a/>', {'class': 'number', 'href': data.html_url, 'text': "#" + data.number}),
			       	$('<a/>', {'class': 'title', 'href': data.html_url, 'text': data.title}),
			       	$('<span/>', {'class': 'meta'}).append(
			       		$('<a/>', {'class': 'repo', 'href': data.base.repo.html_url, 'text': data.base.repo.full_name}),
			       		$('<i/>', {'class': 'octicon octicon-clock'}),
			       		$('<span/>', {'class': 'date', 'text': date})
			       		),
			       	$('<i/>', {'class': 'right-icon mega-octicon octicon-git-pull-request'}),
			       	)
			     	if (data.merged ) {
			     		$(button).find('.octicon-git-pull-request').addClass('octicon-git-merge').removeClass('octicon-git-pull-request');
			     		$(button).addClass('merged-PR-button');
			     	} else {
			     		$(button).addClass('open-PR-button');
			     	}
			    }
			);
    	} else if (url.indexOf("issue") !== -1) {
    		url = "https://api.github.com/repos/" + owner + "/" + repo + "/issues/" + num;
    		$.get(
			    url,
			    function(data) {
					var repo_name = data.repository_url.split("/");
					repo_name = repo_name[repo_name.length - 2] + "/" + repo_name[repo_name.length - 1];
					var date = formatDate(new Date(data.created_at));
					$(button).append(
			       	$('<a/>', {'class': 'number', 'href':...