JSFiddle - React, Tailwind, and code Playground

HTML

<div class="div-pai">
    <div class="div-filho"></div>
</div>

CSS

.div-pai{width: 400px;height: 400px; background-color: black; position: fixed; }
.div-filho{width: 150px; height: 150px; position:absolute; top: 50%; left: 50%; background: blue; margin-top: -75px; margin-left: -75px; opacity: 1;}

.div-pai:before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    background: white;
    opacity: 0.3;
}