JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <a href="http://example.com"></a>
    <div class="foo"></div>
</div>

CSS

.container{
    width: 550px;
    position: relative;
}

.foo{
    width: 400px;
    height: 150px;
    background-color: #DFBDE0;
}

a, .foo:after{
    position: absolute;
    width: 100px;
    height: 100px;
    right: 0;
}

.foo:after{
    content: "";
    background-color: red;
}

a{
    display: block;
    z-index: 1;
}