JSFiddle - React, Tailwind, and code Playground

by justjohn

HTML

<div class="bar_container">
    <div class="bar"> </div>
</div>

CSS

body {
    position:absolute;
    background:black;
    height:100%;
    width:100%;
    overflow:hidden;
    margin:0;
    padding:0;
}
.bar_container {
    -webkit-transition-property: background;
    -webkit-transition-duration: 0.35s;
    -webkit-transition-timing-function: linear;

    -moz-transition-property: background;
    -moz-transition-duration: 0.35s;
    -moz-transition-timing-function: linear;

    -ms-transition-property: background;
    -ms-transition-duration: 0.35s;
    -ms-transition-timing-function: linear;

    -o-transition-property: background;
    -o-transition-duration: 0.35s;
    -o-transition-timing-function: linear;

    transition-property: background;
    transition-duration: 0.35s;
    transition-timing-function: linear;
}
.bar {
    -webkit-transition-property: bottom;
    -webkit-transition-duration: 0.35s;
    -webkit-transition-timing-function: linear;

    -moz-transition-property: bottom;
    -moz-transition-duration: 0.35s;
    -moz-transition-timing-function: linear;

    -ms-transition-property: bottom;
    -ms-transition-duration: 0.35s;
    -ms-transition-timing-function: linear;

    -o-transition-property: bottom;
    -o-transition-duration: 0.35s;
    -o-transition-timing-function: linear;

    transition-property: bottom;
    transition-duration: 0.35s;
    transition-timing-function: linear;
}
.bar_container {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:120px;
    
    background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(rgba(0,0,0,0)));
    background-image: -webkit-linear-gradient(top, #000, rgba(0,0,0,0));
    background-image:    -moz-linear-gradient(top, #000, rgba(0,0,0,0));
    background-image:     -ms-linear-gradient(top, #000, rgba(0,0,0,0));
    background-image:      -o-linear-gradient(top, #000, rgba(0,0,0,0));
    background-image:         linear-gradient(top, #000, rgba(0,0,0,0));
    
    background-color:#000;
}
.bar_container.active {
   ...

JavaScript

$(document).click(function(e) {
    $(".bar_container").toggleClass("active");
});