JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="de" dir="ltr">
    <head>
        <meta charset="UTF-8">       
        <title>Example</title>
    </head>
    
    <body>
        
        <div>
            <a href="#"></a>
        </div>
        
    </body>
</html>

CSS

@charset "UTF-8";

* { margin: 0; padding: 0; border: 0 none; }
html, body { width: 100%; height: 100%; }

div {
    position: relative;
    width: 50% ;
    height: 50% ;
    background-color: black;
}

div::before,
div::after {
    position: absolute ;
    content: "" ;
    top: 0 ;
    width: 30% ;
    height: 30% ;
    background-color: tomato ;
}

div::before {
    left: 0 ;
}

div::after {
    right: 0 ;
}

div a {
    display: block ;
    height: 100% ;
}