JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
   <div class="triggerZone2">
    <h1>
    Animate
    </h1>
        </div>
   
   <div class="rainbow">
      <div class="color1">
      </div>
      <div class="color2">
      </div>
      <div class="color3">
      </div>
      <div class="color4">
      </div>
      <div class="color5">
      </div>
      <div class="color6">
      </div>
      <div class="color7">
      </div>
    </div>

CSS

.triggerZone2{width:200px; height:100px;
border:5px solid black;  margin-left:15%;}


.rainbow{ width:10%; height:30px;  position:absolute; z-index: -1; top:10%; }
  
.rainbowed {
  animation-name:myframes; 
  animation-duration:  2s;
  animation-timing-function: ease-in-out;
  animation-delay:0s;
  animation-iteration-count:1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;}

@keyframes myframes {
  from {
    height:0px;
  } to {
    height:400px;
 }
}








.color1{width:14%; height:100%; background: linear-gradient(to right, white, #FF4540, #FF4540); float:left;}
.color2{width:14%; height:100%; background-color:#FF9840; float:left;}
.color3{width:14%; height:100%; background-color:#FFC540; float:left; }
.color4{width:14%; height:100%; background-color:#54C248; float:left;}
.color5{width:14%; height:100%; background-color:#486BBC; float:left;}
.color6{width:14%; height:100%; background-color:#5E49A3; float:left;}
.color7{width:14%; height:100%;  background: linear-gradient(to right, #A266D0,#A266D0, white); float:left;}

.rainbowed  {
 max-height: 800px;
}

JavaScript

$(".triggerZone2").on("click", function(){
 $(".rainbow").toggleClass("rainbowed");
});