JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!--
<img class=type src="http://johnarrowwood.com/pokemon/type/bug.png">
<img class=type src="http://johnarrowwood.com/pokemon/type/dark.png">
<img class=type src="http://johnarrowwood.com/pokemon/type/dragon.png">
<img class=type src="http://johnarrowwood.com/pokemon/type/electric.png">
<img class=type src="http://johnarrowwood.com/pokemon/type/fairy.png">
<img class=type src="http://johnarrowwood.com/pokemon/type/fighting.png">
<img class=type src="http://johnarrowwood.com/pokemon/type/fire.png">
<img class=type src="http://johnarrowwood.com/pokemon/type/flying.png">
<img class=type src="http://johnarrowwood.com/pokemon/type/ghost.png">
<img class=type src="http://johnarrowwood.com/pokemon/type/grass.png">
<img class=type src="http://johnarrowwood.com/pokemon/type/ground.png">
<img class=type src="http://johnarrowwood.com/pokemon/type/ice.png">
<img class=type src="http://johnarrowwood.com/pokemon/type/normal.png">
<img class=type src="http://johnarrowwood.com/pokemon/type/poison.png">
<img class=type src="http://johnarrowwood.com/pokemon/type/psychic.png">
<img class=type src="http://johnarrowwood.com/pokemon/type/rock.png">
<img class=type src="http://johnarrowwood.com/pokemon/type/steel.png">
<img class=type src="http://johnarrowwood.com/pokemon/type/water.png">
-->
<div class="container one"></div>
<div class="container two"></div>
<div class="container three"></div>
<div class="container four"></div>
<div class="container five"></div>
<div class="container six"></div>
<div class="container seven"></div>
<div class="container eight"></div>

CSS

img.type {
  width: 0.5in;
  margin: 2px;
}
body {
  position: relative;
}
.container {
  position: relative;
  display: inline-block;
  vartical-align: top;
  box-sizing: border-box;
  margin-right: 0.25in;
  margin-bottom: 0.25in;
  padding-top: ( 5px );
  padding-bottom: ( 5px );
  width: calc( 2.3125in + 4px );
  height: calc( 0.5625in + 4px );
  border: 2px solid gray;
  text-align: center;
}
.container svg {
  margin-top: 3px;
}

JavaScript

function create( name, attributes ) {
  var SVG_URL   = "http://www.w3.org/2000/svg";
  var XMLNS_URL = "http://www.w3.org/2000/xmlns/";
  var XLINK_URL = "http://www.w3.org/1999/xlink";
  var e = document.createElementNS(SVG_URL,name);
  if ( name === 'svg' ) {
    e.setAttribute('version',"1.1");
  	e.setAttribute('xmlns',SVG_URL);
    e.setAttribute('xmlns:xlink',XLINK_URL);
    //e.setAttributeNS(XMLNS_URL, "xmlns:xlink", XLINK_URL);
  }
  for ( var key in attributes ) {
    if ( name === 'image' && key === 'href' ) {
      e.setAttributeNS( XLINK_URL,'href',attributes[key] );
    } else {
      e.setAttribute( key, attributes[key] );
    }
  }
  return e;
}
function typeImage(_) {
  var count = arguments.length;
  var size = 0.5;
  if ( count > 4 ) size = size * 4 / count;
  var totalwidth = ( (size*count) + (size/8)*(count-1) ) + "in";
  var height = size + "in";
  var svg = create( 'svg', {
  	width: totalwidth,
    height: height,
  	viewBox: [0,0,totalwidth,height].join(" ")
  } );
  var url = "http://johnarrowwood.com/pokemon/type/"
  var i;
  for ( i = 0 ; i < count ; i++ ) {
  	var img = create( 'image', { 
    	href: url + arguments[i].toLowerCase() + '.png',
      x: ((size+(size/8))*i) + "in",
      y: "0in",
      width: size + "in",
      height: size + "in"
    });
    svg.appendChild( img );
  }
  return svg;
}
$('.container.one').html(typeImage('fighting'));
$('.container.two').html(typeImage('electric','grass'));
$('.container.three').html(typeImage('fairy','flying','psychic'));
$('.container.four').html(typeImage('fire','flying','ice','psychic'));
$('.container.five').html(typeImage('electric','fairy','flying','grass','psychic'));
$('.container.six').html(typeImage('bug','fire','flying','ice','psychic','rock'));
$('.container.seven').html(typeImage('bug','dark','fire','flying','ghost','ice','poison'));
$('.container.eight').html(typeImage('dark','dragon','electric','grass','ground','normal','steel','water'));