JSFiddle - React, Tailwind, and code Playground

by gael

HTML

<div id="maskborder">
    <div id="mask"></div>
</div>

CSS

#mask{
    position:absolute;
    width: 90%;
    height:90%;
    top:5%;
    left:5%;
    background-color: blue;
-webkit-mask-image: url(https://dl.dropbox.com/s/2kih8ox9q2czjeg/pngfind.com-kawaii-transparent-png-621355.png);
-webkit-mask-size: 50%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

#maskborder{
    position:absolute;
    width: 50%;
    height:50%;
    background-color: red;
-webkit-mask-image: url(https://dl.dropbox.com/s/2kih8ox9q2czjeg/pngfind.com-kawaii-transparent-png-621355.png);
-webkit-mask-size: 50%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}