JSFiddle - React, Tailwind, and code Playground

by SwampFall

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="14"><rect width="32" height="14" fill="#7038f8" rx="4" ry="4" stroke="#483890" stroke-width="0.8"></rect><text x="16" y="10" font-size="9" fill="#f8f8f8" font-family="Verdana" textLength="29" text-anchor="middle" lengthAdjust="spacingAndGlyphs">DRAGON</text></svg>

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="14"><text x="16" y="12" font-size="12" font-family="Verdana" textLength="29" text-anchor="middle" lengthAdjust="spacingAndGlyphs">DRAGON</text></svg>

<img id="type1" alt="dragon">

<img alt="fairy">

JavaScript

var img = document.getElementById("type1");
var typeImg = new Image();

typeImg.onload = function() {
	img.src = this.src;
}

typeImg.src = "https://pokeheroes.com/img/type_icons/dragon.gif";