JSFiddle - React, Tailwind, and code Playground
by stevenkaspar
HTML
<svg width="100%" height="100%" viewBox="0 0 340 340" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
<title>Relationship Map</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="round40" x="-20" y="-20" width="40" height="40" rx="20"/>
<clipPath id="roundLg">
<use xlink:href="#round40"/>
</clipPath>
<rect id="round26" x="-13" y="-13" width="26" height="26" rx="13"/>
<clipPath id="roundSm">
<use xlink:href="#round26"/>
</clipPath>
</defs>
<use xlink:href="#roundLg" stroke-width="2" stroke="black"/>
<use xlink:href="#roundSm" stroke-width="2" stroke="black"/>
<g id="Relationships" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Relationship-Map">
<path d="M2.49411861,169.5 L342.552937,169.5" id="Line" stroke="#E9E9E9" stroke-linecap="square"></path>
<path d="M122.5,0.5 L122.5,134.5" id="Line" stroke="#E9E9E9" stroke-linecap="square"></path>
<path d="M171.5,220.5 L171.5,340.504167" id="Line" stroke="#E9E9E9" stroke-linecap="square"></path>
<path d="M214.5,0.5 L214.5,134.5" id="Line" stroke="#E9E9E9" stroke-linecap="square"></path>
<g transform="translate(170 170)">
<circle id="Center" stroke="#979797" fill="" r="20"></circle>
<image xlink:href="http://placehold.it/200x200" height="40" width="40" x="-20" y="-20" clip-path="url(#roundLg)" />
</g>
<g transform="translate(243 233)">
<circle id="Oval" stroke="green" fill="" r="13"></circle>
<image xlink:href="http://placehold.it/200x200" height="26"...