JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
   <svg height="180" width="500">
      <g transform="translate(100, 50)">
         <rect width="100%" class="node" rx="17" height="30" style="fill: rgb(255, 255, 255); cursor: default;"></rect>
         <circle cx="15" cy="15" r="15" fill="#FFFFFF" filter="url(#circleShadow)" stroke="lightgray" stroke-width="0.1" width="15" height="15"></circle>
         <text x="40" y="19" class="graph-element-text node-text-color" style="cursor: pointer;">long text11111111111111122222</text>
      </g>
   </svg>
</div>

CSS

.container {
  background-color: lightgray;
}

body {
    overflow: hidden;
}


.graph-background-color {
    background-color: #F8F8F9;
}

svg {
   fill: yellow;
}

.node {
    fill: #F3F2F1;
}