JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mask r150 top100 left150">
    <img src="http://placehold.it/300x400" />
</div>

CSS

.mask {
    position:relative;
    overflow:hidden;
    display:inline-block;/* preserve display behavior of initila image to mask*/
    box-shadow:0 0 0 1px;/* show where i stands */
}
.mask img {
    display:block;/* a way to remove bottom gap*/
}
.mask:before {
    content:'';
    position:absolute;
    border-radius:100%;
    box-shadow:0 0 0 2000px white;
}
.r150:before {
    height:150px;
    width:150px;
}
.top100:before {
    top:100px; 
}
.left150:before {
    left:150px;
}