JSFiddle - React, Tailwind, and code Playground

by sesamechicken

HTML

<svg width="256" height="256">
  <rect width="256" height="256" rx="30" x="0" y="0" fill="#4471B7"/>

  <rect x="10" y="10" width="236" height="236" rx="22" fill="#fff"/>
  <rect x="20" y="20" width="216" height="216" rx="16" fill="#4471B7"/>
  <line x1="20" x2="240" y1="70" y2="70" stroke="white" stroke-width="10"/>
  <line x1="20" x2="240" y1="130" y2="130" stroke="white" stroke-width="10"/>
  <line x1="20" x2="240" y1="190" y2="190" stroke="white" stroke-width="10"/>
  <!-- top circle -->
  <circle id='top_circle' cx="128" cy="70" r="20" stroke="white" stroke-width="10" fill="#4471B7" />
  <!-- middle set -->
  <circle id='mid_circle01' cx="94" cy="130" r="20" stroke="white" stroke-width="10" fill="#4471B7" />
  <circle id='mid_circle02' cx="162" cy="130" r="20" stroke="white" stroke-width="10" fill="#4471B7" />
  <!-- bottom set -->
  <circle id='bttm_circle01' cx="66" cy="190" r="20" stroke="white" stroke-width="10" fill="#4471B7" />
  <circle id='bttm_circle02' cx="190" cy="190" r="20" stroke="white" stroke-width="10" fill="#4471B7" />
</svg>

CSS

#top_cirlce{
 transform: translate(350px, 0); 
}

JavaScript

const circles = ['top_circle', 'mid_circle01', 'mid_circle02', 'bttm_circle01', 'bttm_circle02']