JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <div class="staff_in">
    <div class="staff_name">
      <h3>ここに名前</h3>
      <img src="https://placehold.jp/150x150.png" alt="" class="staff_kao" >
    </div>
    <div class="staff_bun">
      <div>
        <dl>
          <dt>Q1</dt>
          <dd>A1</dd>
          <dt>Q2</dt>
          <dd>A2</dd>
          <dt>Q3</dt>
          <dd>A3</dd>
        </dl>
      </div>
    </div>
    <div class="staff_btn">
      <img class="onoff-btn" src="https://placehold.jp/30x30.png">
    </div>
  </div>
 </div>
 
 <script>
   var onoff = "off";
   var onimg = "https://placehold.jp/ffffff/ffffff/30x30.png";
   var offimg = "https://placehold.jp/30x30.png";

   $('.onoff-btn').click(function() {
     switch (onoff) {
       case "off":
         onoff = "on";
         $(this).attr('src',onimg);
         break;
       case "on":
         onoff = "off";
         $(this).attr('src',offimg);
         break;
     }
   });
</script>

CSS

.staff_in{
	background: red;
	padding: 40px 40px 70px 40px;
	width: 520px;
	cursor: pointer;
	cursor: hand;
	position: relative;
}
.staff_btn{
	position: absolute;
	padding-top:30px;
	left: 50%;
	transform: translateX(-50%);
}

.staff_name{
	position: relative;
	padding-left: 30px;
}
.staff_name img{
	position: absolute;
	top:-95px;
	right:0;
}
.staff_name h3{
	font-size:3em;
	line-height: 0.8em;
}
.staff_bun{
	background: #fff;
	border-radius: 40px;
	margin-top: 50px;
	cursor: default;
}
.staff_bun dl{
	padding:30px 60px;
}

JavaScript

$(function() {
  //パネルを非表示
  $('.staff_bun').hide();
  $('.staff_name')
    .click(function(e){
 //クリックでパネルを開く
      $('+.staff_bun', this).slideToggle(500);
    })
});