JSFiddle - React, Tailwind, and code Playground

by SwampFall

HTML

<br><br><br><br><br><br><br><svg>
  <clipPath id="clipCircle">
    <circle r="70" cx="70" cy="70" />
  </clipPath>
  <image xlink:href="http://upload.pokeheroes.com/img/ava.php?uid=480783704&g=m" clip-path="url(#clipCircle)" width="140"/>
  <rect y="100" width="140" height="40" style="fill:rgb(0,80,0)" clip-path="url(#clipCircle)"/>
  <text x="70" text-anchor="middle" y="118" font-family="Verdana" font-size="18" fill="black">SwampFall</text>
</svg>
<br><br><br><br><svg>
  <clipPath id="clipCircle">
    <circle r="70" cx="70" cy="70" />
  </clipPath>
  <image xlink:href="http://upload.pokeheroes.com/img/ava.php?uid=379816630&g=f" clip-path="url(#clipCircle)" width="140"/>
  <rect y="100" width="140" height="40" style="fill:rgb(120,20,20)" clip-path="url(#clipCircle)"/>
  <text x="70" text-anchor="middle" y="118" font-family="Verdana" font-size="18" fill="black">Ropets123</text>
</svg>

CSS

body {
  text-align: center;
}