JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box"></div>

<div class="text"></div>

CSS

#box{
height:40px;
width:100px;
background:red;
}

#box:hover{background:blue;}

#box.expanded:after {
content:'';
height: 10px;
position: absolute;
width: 0;
margin-top:40px;
margin-left:40px;
border: 10px solid transparent;
border-top-color: red;
}


#box:hover:after{

border-top-color: blue;
}

.text{
    
display:none;
height:40px;
width:100px;
background:#fd0;
margin-top:20px;
}

JavaScript

$(document).ready(function () {
    
$('#box').click(function () {
      $(this).toggleClass('expanded');
      $('.text').slideToggle('slow');
  });   
});