JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

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

CSS

#box {
    width:276px;
    height:276px;
    padding:4px;
    overflow:hidden;
    border:5px solid #e9eaed
  } 
  #innerBox1 {
    height:276px;
    margin-bottom:4px
  }
  #box:hover #innerBox1 {
    background:#e9eaed
  }
  #innerBox2 {
    height:276px;
    background:#f0f0f0
  }

JavaScript

$( "#box" ).click(function() {
  $( "#innerBox1" ).slideToggle( "slow" );
});