JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent parent-opacity">
  <div class="enfant"></div>
</div>
<br>
<div class="parent parent-backgroundrgba">
  <div class="enfant"></div>
</div>

CSS

.parent {
  background: blue;
  padding: 50px;
}
  .parent-opacity {
    opacity: 0.5;
  }
  .parent-backgroundrgba {
    background: rgba(0,0,255,0.5);
  }
  
.enfant {
  background: red;
  padding: 50px;
}