JSFiddle - React, Tailwind, and code Playground

by Fernando Leal

HTML

<div class="fundo">
    <div class="metade">
    </div>
</div>

CSS

div.fundo{
    height: 100px;
    background-color: red;
}

div.metade{
    height: 100px;
    /* background com metade transparente horizontal */
    background-image: linear-gradient( to right, rgba(0,0,0,0), rgba(0,0,0,0) 50%, rgb(0,0,0) 50%, rgb(0,0,0) 100%, rgba(0,0,0,0) 100% );
}