JSFiddle - React, Tailwind, and code Playground

by NicoO

HTML

<button>Light toggle</button>

CSS

html, body
{
    height: 100%;
}

body
{
    background-image: url(http://www.placehold.it/1000x800);
    background-size: cover;
    background-attachment:scroll;
    position: relative;
}

body:after
{
    transition-duration: 0.5s;
    background-color: rgba(0,0,0,0);
    position: absolute;
    content: "";
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index:-1;
}

body.dark:after
{
     background-color:rgba(0,0,0,0.3);
}

JavaScript

$("button").click(function(){
    $("body").toggleClass("dark")
});