JSFiddle - React, Tailwind, and code Playground

by swarups

HTML

<svg width="70" height="70" viewBox="0 0 70 70">
  <defs>
    <polygon points="16.7 21 53.2 21 53.2 51 16.7 51"/>
  </defs>
  <g fill="none">
    <circle fill="#FFF" cx="35" cy="35" r="35"/>
    <path fill="#4A90E2" fill-opacity="0.6" d="M53.2 48.4C53.2 49.8 51.9 51 50.2 51L19.6 51C17.9 51 16.7 49.8 16.7 48.4L16.7 30.5C16.7 29.1 17.9 27.9 19.6 27.9L50.2 27.9C51.9 27.9 53.2 29.1 53.2 30.5L53.2 48.4Z" />
    <polygon fill="#FFF" stroke="#ECECEC" points="50.9 22.3 19.9 22.3 19.9 33.2 34.9 42.2 50.9 32.4" />
    <path fill="#CCC" d="M44.5 31.8L26.3 31.8C25.7 31.8 25.5 31.2 25.5 30.6 25.5 29.8 25.7 29.4 26.3 29.4L44.5 29.4C44.9 29.4 45.3 29.8 45.3 30.6 45.3 31.2 44.9 31.8 44.5 31.8M34.2 27.8L26.2 27.8C25.7 27.8 25.5 27.2 25.5 26.6 25.5 25.9 25.7 25.5 26.2 25.5L34.2 25.5C34.7 25.5 35 25.9 35 26.6 35 27.2 34.7 27.8 34.2 27.8M44.5 35L26.3 35C25.7 35 25.5 34.4 25.5 33.8 25.5 33.2 25.7 32.6 26.3 32.6L44.5 32.6C44.9 32.6 45.3 33.2 45.3 33.8 45.3 34.4 44.9 35 44.5 35"/>
  </g>
</svg>