JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="500" height="500">
    <rect x="10" y="10" height="235" width="235" fill="red" />
    <rect x="255" y="10" height="235" width="235" fill="green" />
    <rect x="10" y="255" height="235" width="235" fill="blue" />
    <rect x="255" y="255" height="235" width="235" fill="yellow" />
    
    <rect x="50" y="50" height="400" width="400" fill="rgba(255,255,255,0.8)" />
</svg>

CSS

svg {
    border: 1px solid black;
}