JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <div class="octahedron center"></div>
</div>

CSS

.octahedron {
    width: 0;
    height: 0;
    border-right: 12px solid rgba(0,0,0, .9);
    border-left: 68px solid rgba(0,0,0, .4);
    border-bottom: 60px solid rgba(0,0,0, .6);
    border-top: 26px solid rgba(0,0,0, .65);
    -webkit-transform: rotate(45deg);
    -webkit-transition: all 1s ease-in-out;
    -moz-transform: rotate(45deg);
    -moz-transition: all 1s ease-in-out;
    -ms-transform: rotate(45deg);
    -ms-transition: all 1s ease-in-out;
    transform: rotate(45deg);
    transition: all 1s ease-in-out;
}

.octahedron:hover {
    width: 0;
    height: 0;
    border-right: 60px solid rgba(0,0,0, .7);
    border-left: 26px solid rgba(0,0,0, .3);
    border-bottom: 12px solid rgba(0,0,0, .45);
    border-top: 68px solid rgba(0,0,0, .55);
    -webkit-transform: rotate(45deg);
    -webkit-transition: all 1s ease-in-out;
    -moz-transform: rotate(45deg);
    -moz-transition: all 1s ease-in-out;
    -ms-transform: rotate(45deg);
    -ms-transition: all 1s ease-in-out;
    transform: rotate(45deg);
    transition: all 1s ease-in-out;
}

.box {
    height: 60px;
    margin: 20px;
    padding: 20px;
}
    
.center {
    margin-right: auto;
    margin-left: auto;
}