JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <a href="#"></a>
    </li>
</ul>

CSS

* {
    padding: 0;
    margin: 0;
}

ul {
    float: left;
}

li {
    position: relative;
    float: left;
    list-style-type: none;
}

a {
    float: left;
    width: 100px;
    height: 100px;
    background: red;
}

li:after {
    position: absolute;
    top: 0;
    right: -100px;
    width: 100px;
    height: 100px;
    float: left;
    background: yellow;
    content: "";
    cursor: pointer;
}