JSFiddle - React, Tailwind, and code Playground

by Richard Arnone

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 class="content">
      <h4>
         H4 goes here
     </h4>
      <p>
        Text goes here
      </p>
    </div>
  </div>
</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;
}

.button:hover .content {
  display: block;
}