JSFiddle - React, Tailwind, and code Playground

HTML

<div id='container'>
    <div id='diamond'></div>
</div>

CSS

#diamond {

    width: 0;

    height: 0;

    border: 100px solid transparent;

    border-bottom-color: red;

    position: relative;

    top: -100px;

}

#diamond:after {

    content:'';

    position: absolute;

    left: -100px;

    top: 100px;

    width: 0;

    height: 0;

    border: 100px solid transparent;

    border-top-color: red;

}

#diamond:hover {

    -webkit-filter: drop-shadow(5px 5px 5px #222);

    filter: drop-shadow(5px 5px 5px  #222);

}

#container {

    width:200px;

    height:200px;

    border:3px solid;

}