JSFiddle - React, Tailwind, and code Playground

by xu xiaofei

HTML

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }

svg{
    display:none;
 }

img {
    display: block;
    width: 500px;
    margin:auto;
 }
</style>


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" preserveAspectRatio="xMidYMid meet" class="css-1y5supu" id="fhhebafa">
<defs id="SvgjsDefs1184"/>
<g id="SvgjsG1185" featurekey="root"/>
<g id="SvgjsG1186" featurekey="symbol1" fill="#2566dd" transform="matrix(1.0000001089913624,0,0,1.0000001089913624,-3.3480010275705645,-3.217001448168231)">
<g><g>
<path fill="#2566dd" d="M39.486,42.795c-1.941,2.495-3.107,5.312-3.498,8.45h11.949L39.486,42.795z"/>
<path fill="#2566dd" d="M51.375,24.195c-6.328,0.468-11.894,2.772-16.697,6.918l16.697,16.696V24.195z"/>
<path fill="#2566dd" d="M13.348,56.104c0.494,9.345,3.871,17.498,10.13,24.458l24.459-24.458H13.348z"/>
<path fill="#2566dd" d="M34.894,76.019c4.745,4.088,10.237,6.364,16.481,6.828V59.538L34.894,76.019z"/>
<path fill="#2566dd" d="M56.234,71.669c3.186-0.392,6.045-1.577,8.576-3.552l-8.576-8.577V71.669z"/>
<path fill="#2566dd" d="M59.669,56.104l16.744,16.744c4.158-4.818,6.469-10.398,6.935-16.744H59.669z"/>
<path fill="#2566dd" d="M82.964,51.245c-0.463-6.241-2.738-11.731-6.822-16.473L59.668,51.245H82.964z"/>
<path fill="#2566dd" d="M80.692,23.351c-6.959-6.262-15.112-9.639-24.459-10.134v34.591L80.692,23.351z"/>
</g></g></g>
</svg><script>

(function(w,d) {
   'use strict';

   var svg = new XMLSerializer().serializeToString(d.getElementsByTagName( 'svg' )[ 0 ]);
   var base64 = w.btoa( svg );
   var i= d.createElement( 'img' );
       i.setAttribute( 'src', 'data:image/svg+xml;base64,' + base64 );
       d.body.appendChild( i );
}(window, document));
</script>