JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS

.container {
    height: 75px;
    width: 200px;
    background-color: gray;
    overflow:hidden;
    display:block;
}
.top {
    height: 37px;
    width: 200px;
    position: relative;
    background-color: green;
}
.bottom {
    height: 37px;
    width: 200px;
    
    position: relative;
    background-color: yellow;
}
.left {
    height: 50px;
    width: 50px;
    top:-62px;
    left:-25px;
    position: relative;
    background-color: blue;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
.right {
    height: 50px;
    width: 50px;
    top:-112px;
    left:175px;
    position: relative;
    background-color: blue;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

JavaScript

$(".top, .bottom, .left, .right" ).mouseenter(
  function() {
    $( this ).css("background","gray");
  }
);
$(".top, .bottom, .left, .right" ).mouseleave(
  function() {
    $( this ).css("background","");
  }
);