JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <a href="#">
        <span></span>
    </a>
</div>

CSS

div {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 400px;
    height: 200px;
    -webkit-border-radius: 20px;
            border-radius: 20px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}
        
a {
    display: block;
    overflow: hidden;
    height: 70px;
    width: 70px;
    margin: 130px 0 0 330px;
    -webkit-border-radius: 0 0 20px 0;
            border-radius: 0 0 20px 0;
}


div, a {
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

span {
    display: block;
    margin: 22px 0 0 22px;
    width: 100px;
    height: 100px;
    background-color: #000;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}

JavaScript

// Thiw works on Firefox, not on Webkit