JSFiddle - React, Tailwind, and code Playground

by stevenkaspar

HTML

<svg style='border: 1px solid #ddd;' height='40' width='40'>
    <text y='12' x='20' width='40' text-anchor='middle' stroke-width='.3' stroke='#aaa'>1000</text>
    <rect width='40' height='20' fill='#222' x='0' y='20'></rect>
    <rect width='6' height='10' fill='#222' x='0' y='10'></rect>
    <rect width='18' height='12' fill='#222' x='11' y='8'></rect>
    <rect width='6' height='10' fill='#222' x='34' y='10'></rect>
    <text y='38' x='20' width='40' text-anchor='middle' stroke-width='.3' stroke='#fff' fill='#fff'>1</text>
    
</svg>
<hr/>
<svg style='border: 1px solid #ddd;' height='40' width='40'>

    <g>
        <text x='20' y='40' text-anchor='middle'>100</text>
        <g transform='rotate(361, 20, 20)'>
            <circle cx='20' cy='20' r ='8' fill='green'></circle>
            <rect width='4' height='8' x='18' y='5' fill='green'></rect>
        </g>
    </g>
    
</svg>