JSFiddle - React, Tailwind, and code Playground

by Deividas Krupstas

HTML

<input type = "checkbox" id = "backgroundToggle" />
<label for = "backgroundToggle">Switch Background</label>
<div id = "wrapper"></div>

CSS

* {
    padding: 0;
    margin: 0;
    border: 0;
}

html, body {
    height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

input[type = "checkbox"] {
    display: none;
}

label {
    position: absolute; 
    top: 10px;
    left: 10px;
    background-color: #eee;
    border: 2px solid #ccc;
    padding: 5px;
    border-radius: 10px;
    font-family: Arial, Sans-Serif;
    cursor: pointer;
}

#wrapper {
    background-color: hsla(0, 100%, 50%, 1);
    height: 100%;
    width: 100%;
}

input[type = "checkbox"]:checked ~ #wrapper {
    background-color: hsla(0, 100%, 50%, 0.1);
}