JSFiddle - React, Tailwind, and code Playground

HTML

<div id="door">
    <div class="window"></div>
    
</div>

CSS

#door{
    height:300px;
    width:225px;
    border 1px solid #000;
    background-color:orange;
    position:relative;
}
.window{
    
   height:70px;
    width:50px;
    background-color:blue;
    opacity:0.6;
    top:10px;
    right:10px;
    position:absolute;
}

JavaScript

// i want to be able to cut the hole in the orange the same so the opacity doesn't look purple and you will see the blue and the white through it. I.e. Like a window
// N.B. I am using a background image instead of background color which is wood so the solution must work with a repeating image:

// is there any way to cut this hole?

// Solutions looked at:
//      repeating the image and excluding an area

// Thanks in advance