JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="393px"
	 height="528px" viewBox="0 0 393 528" enable-background="new 0 0 393 528" xml:space="preserve">
<g id="underskirt-4">
	  <rect  class="pattern-dots" width="100" height="100"/>
    <rect x="110" class="blue mask-dots" width="100" height="100"/>
</g>
</svg>
<svg><defs><pattern id="pattern-dots" width="50" height="50" 
          patternUnits="userSpaceOnUse">
         <path fill="white" d="M15.946,12.651c0,1.905-1.544,3.45-3.45,3.45c-0.953,0-1.815-0.386-2.439-1.011
	c-0.624-0.624-1.01-1.486-1.01-2.439c0-1.905,1.544-3.45,3.45-3.45S15.946,10.746,15.946,12.651z"/>
     </pattern>
        <mask id="mask-dots">
          <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-dots)" />
        </mask>      		
      </defs>
</svg>

CSS

.mask-dots {
        mask: url(#mask-dots);
      }      
      .pattern-dots {
        fill: url(#pattern-dots)
      }

      .blue {
        fill: blue;