JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sky">Test</div>

CSS

.sky
  {
    background:blue;
    margin-right: auto;
    margin-left:auto;
    opacity:0.4;
    width:70%;
    height:400px;
 z-index: -1;
 bottom:-17em;
 font-size: 1em;
    position:absolute;

  }
#sky:hover
{
  opacity:1.0;
  z-index: 11;
}
.sky1
{
  background:red;
  opacity:.8;
  margin-right: auto;
    margin-left:auto;
    opacity:0.9;
    width:70%;
    height:400px;

 z-index: 11;
 bottom:-7em;
 font-size: 3em;
}

JavaScript

$(function() {
        $( ".sky" ).click(function() {
            $( ".sky" ).toggleClass( "sky1", 1000 );
            
        });
    });