JSFiddle - React, Tailwind, and code Playground

HTML

<div class="heading">
  <h2>
        H2 goes here
     </h2> 
  <div class="button">
    <p>
      <button id="dropdown">
        <span id="dropdown_word"> V </span>
      </button>
    </p>
  </div>
</div>
<div class="content">
  <h4>
         H4 goes here
     </h4>
  <p>
    Text goes here
  </p>
</div>

CSS

#dropdown {
   width: 80px;
   height: 80px;
   border-radius: 80px;
   border-width: 0px;
   transition: background-color 1s;
 }
 #dropdown_word {
   font-size: 40px;
   color: orangered;
 }
 #dropdown:hover {
   background-color: cyan;
 }
 .content { display:none}

JavaScript

$("#dropdown").hover(
function() {
 $('.content').show()
},
function() {
 $('.content').hide()
}
);