JSFiddle - React, Tailwind, and code Playground

HTML

<div id='item1'>Item 1</div>
<div id='spec1'>sepc 1
    <br/>
    sepc 2
    <br/>
    sepc 3
    <br/>
    sepc 4
    <br/>
</div>

CSS

#item1{
    background-color:orange;
    width:120px;
    height:20px;
    text-align: center;
}


#spec1{
    background-color:red;
    width:120px;
  /*  display:none; */
    text-align: center;
 height:0px; 
    overflow:hidden;
}

JavaScript

$('#item1').hover(function(){
 $("#spec1").stop(true).animate({height:"100px"}, 300);
},function(){
$("#spec1").stop(true).animate({height:'0px'}, 300);
})