JSFiddle - React, Tailwind, and code Playground

by tnajdek

HTML

<div class="ninja svg"></div>

CSS

div.svg {
    width:200px;
    height:200px;
    background-repeat:no-repeat;
    border:1px solid green;
    background-repeat:no-repeat;
    background-image:url('data:image/svg+xml;utf-8,<?xml version="1.0" encoding="UTF-8" standalone="no"?><!-- Created with Inkscape (http://www.inkscape.org/) --><svg id="svg3326" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 218.20346 223.528" height="100%" width="100%" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata id="metadata3331"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF></metadata><g id="layer1" transform="translate(-505.18499,-434.8824)"><g id="ninja-shuriken" transform="translate(12.984142,150.1914)"><ellipse id="ellipse292" d="m 691.75399,476.23999 c 0,17.66151 -40.49764,31.979 -90.454,31.979 -49.95637,0 -90.454,-14.31749 -90.454,-31.979 0,-17.66151 40.49763,-31.979 90.454,-31.979 49.95636,0 90.454,14.31749 90.454,31.979 z" rx="90.454" ry="31.979" cy="476.24" cx="601.3" fill="#4d4d4d"/><g id="g294"><g id="g296"><g id="g298"><path id="path300" fill="#b3b3b3" d="m519.62,452.85c-0.345,0-0.673-0.179-0.858-0.485l-13.081-21.834-11.253,2.59c-0.076,0.017-0.151,0.024-0.226,0.024-0.351,0-0.682-0.185-0.864-0.498-0.221-0.379-0.166-0.856,0.131-1.178l16.259-17.616-5.536-11.533c-0.189-0.392-0.103-0.858,0.213-1.157,0.189-0.181,0.438-0.275,0.688-0.275,0.164,0,0.328,0.04,0.478,0.122l21.232,11.554,9.709-10.357c0.193-0.206,0.461-0.315,0.73-0.315,0.155,0,0.311,0.036,0.454,0.109,0.397,0.202,0.612,0.642,0.525,1.079l-4.891,25.288,13.21,4.457c0.432,0.145,0.711,0.563,0.678,1.02-0.034,0.455-0.371,0.829-0.818,0.909l-26.074,4.739,0.294,12.336c0.011,0.453-0.286,0.856-0.722,0.982-0.092,0.026-0.185,0.039-0.278,0.039z"/><path id="path302"...