JSFiddle - React, Tailwind, and code Playground

by Exceeder

HTML

<body class="base">
<span><input id="customize" type="checkbox">Customize</span>
<ul>
 <li><label>Name:</label><input name="name"></li>
 <li><label>Pasword:</label><input type="password" name="pass"></li>
</ul>
</body>

CSS

/* defaults */
.base ul { list-style:none; }
.base li { display: table-row; }
.base li * { display: table-cell; padding-right:1em; }
/* customization */
.custom label { font-family: sans-serif; font-size:.8em; color:#777; }
.custom input {  
   box-shadow: 1px 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
   border-radius:0.3em; border:none; font-size:1.0em; padding:0.3em;
   outline: none;
 }
.custom li:after { 
  content:"*"; 
  color:#bbb; padding-bottom:0.5em; display:inline-block; 
}
.custom ul:after { 
  content: "* denotes required fields."; 
  color:#bbb; font-size:0.8em; width:20em; 
}
body.custom {  background: linear-gradient(white, #eee); height:100vh; }

JavaScript

var $doc = $doc || document; //make it compatible with GWT
$doc.getElementById("customize").onchange = function() {
  if (this.checked) {
    $doc.getElementsByTagName("body")[0].className = "base custom";
  } else {
    $doc.getElementsByTagName("body")[0].className = "base";
  }
}