JSFiddle - React, Tailwind, and code Playground

by Mark Coleman

HTML

<div id="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;
}
#sky.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() {
        $(this).toggleClass("sky1", 1000);
    });
});