JSFiddle - React, Tailwind, and code Playground

HTML

<div class="background">
  <div class="mainDiv" />
  <div class="maskDiv" />
</div>

CSS

.background{
  width: 100%;
  height: 100%;
  background-image: url("https://www.1800flowers.com/blog/wp-content/uploads/2021/05/Birthday-Flowers-Colors.jpg");
}

.mainDiv{
  width:150px;
  height:150px;
  background: red;
}

.maskDiv{
  width:50px;
  height:50px;
  border-radius: 10px;
  background: white;
  
  position: relative;
  left: 50%;
  top: 10%;
}