JSFiddle - React, Tailwind, and code Playground

by Andrew Dunai

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="500" viewBox="0 0 700 400">
  <rect x=0 y=0 width=700 height=400 fill=#1144AA />
  <defs>
    <style type="text/css">
      <![CDATA[
      text {
        font-family: sans-serif;
        fill: #00FF00;
        text-anchor: middle;
        dominant-baseline: middle;
        font-size: 2.5em;
      }
      text.gnd {
        fill: #AAAAAA;
        font-size: 2em;
      }
      text.vcc {
        fill: #FF4444;
        font-size: 2em;
      }
      ]]>
    </style>
    <g id=pin>
      <circle r=35 fill=#FFCC00 />
      <circle r=20 fill=black />
      <circle r=40 fill=none stroke=#FFCC00 stroke-width=2 />
    </g>
    <g id=square>
      <rect x=-35 y=-35 width=70 height=70 fill=#FFCC00 />
      <circle r=20 fill=black />
      <rect x=-40 y=-40 fill=none width=80 height=80 stroke=#FFCC00 stroke-width=2 />
    </g>
  </defs>
  <rect fill=none stroke=#FFFFAA stroke-width=4 x=100 y=100 width=500 height=200 />

  <use xlink:href=#pin x=150 y=150 />
  <use xlink:href=#pin x=250 y=150 />
  <use xlink:href=#pin x=350 y=150 />
  <use xlink:href=#pin x=450 y=150 />
  <use xlink:href=#pin x=550 y=150 />
  <use xlink:href=#square x=150 y=250 />
  <use xlink:href=#pin x=250 y=250 />
  <use xlink:href=#pin x=350 y=250 />
  <use xlink:href=#pin x=450 y=250 />
  <use xlink:href=#pin x=550 y=250 />

  <text x=150 y=70 class=vcc>3.3V</text>
  <text x=250 y=70>47</text>
  <text x=350 y=70>14</text>
  <text x=450 y=70>12</text>
  <text x=550 y=70 class=gnd>GND</text>
  <text x=150 y=330 class=gnd>GND</text>
  <text x=250 y=330>48</text>
  <text x=350 y=330>21</text>
  <text x=450 y=330>13</text>
  <text x=550 y=330 class=vcc>3.3V</text>

  <!-- <rect fill=#00FF0030 stroke=#00AA00 stroke-width=4 x=200 y=30 width=300 height=340 /> -->
</svg>