JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div id="switcher">
    <div class="switcher-toggle"><i class="fa fa-sliders"></i></div>
    <div class="switcher-content">
        <div id="layout">
            <h4>Theme Layout</h4>
            <select name="" class="layout">
                <option value="wide">Wide</option>
                <option value="boxed">Boxed</option>
            </select>
        </div>
        <div id="skins">
            <h4>Theme Skins</h4>
            <select name="" class="skins">
                <option value="light">Light</option>
                <option value="dark">Dark</option>
            </select>
        </div>
        <div class="colors">
            <h4>Color Switch</h4>
            <span data-color="blue" class="scolor blue active"></span>
            <span data-color="red" class="scolor red"></span>
            <span data-color="green" class="scolor green"></span>
            <span data-color="orange" class="scolor orange"></span>
            <span data-color="carrot" class="scolor carrot"></span>
            <span data-color="violet" class="scolor violet"></span>
            <span data-color="pink" class="scolor pink"></span>
            <span data-color="gold" class="scolor gold"></span>
        </div>
        <span data-color="default" class="sdefault">Default</span>
    </div>
</div>
<div class="wrapper">
    <header class="header">
        <div class="logo">
            Switcher
            <div class="slogan">jQuery Switcher Plugin</div>
        </div>
    </header>
    <div id="content">
        <p>
            A wonderful serenity has taken possession of soul, like these sweet mornings of spring which I enjoy with my whole heart, and feel the charm of existence in this spot, I should be incapable of drawing -webkit-transform : rotateX(180deg); which was created
            for the bliss of souls like mine. I am so happy, my dear friend. So absorbed in...

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #f5f5f5;
    color: #222;
    font-family: "Montserrat";
    font-size: 14px;
    transition: 0.4s
}

a {
    color: #333;
    text-decoration: none;
}

.wrapper {
    background: #fff;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}
body.boxed .wrapper {
    width: 90%;
}

header {
    display: block;
    overflow: hidden;
    background: #fff;
    text-align: center;
    padding: 25px 0;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

header .logo {
    font-size: 45px;
    font-weight: 700;
    letter-spacing: -4px;
}

header .logo .slogan {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: normal;
    display: block;
    margin-top: 8px;
}

#switcher {
    position: fixed;
    left: -213px;
    top: 5%;
    display: block;
    background: #fff;
    width: 160px;
    padding: 25px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    transition: 0.4s
}

#switcher.open {
    left: 0;
}

#switcher .switcher-toggle {
    position: absolute;
    right: -42px;
    display: block;
    width: 40px;
    height: 40px;
    font-size: 21px;
    line-height: 40px;
    background: #FFFFFD;
    color: #222;
    text-align: center;
    cursor: pointer;
    border: 1px solid #f0f0f0;
}

#switcher h4 {
    font-family: "Montserrat";
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 400;
    color: #444;
    margin-left: 5px;
    text-transform: uppercase;
    letter-spacing: 2px;
}


/* LAYOUT */

.layout,
.skins {
    display: block;
    font-family: "Montserrat";
    border-color: #f0f0f0;
    padding: 5px;
    margin-bottom: 25px;
    margin-left: 5px;
}


/* SKINS */

.dark {
    background: #1d1d1d;
    color: #fff;
}

.dark .wrapper {
    background: #2d2d2d;
    color: #fff;
}

.dark .header {
    background: #3d3d3d;
    color: #fff;
}

.light {
    background: #ffffff;
}

.light .wrapper {
    background: #ffffff;
   ...

JavaScript

// Switcher jQuery Plugin
$(".switcher-toggle").click(function() {
    $("#switcher").toggleClass("open");
});

$(".skins, .layout").change(applyClasses);
$(".colors span").click(function() {
    $(this).addClass('active').siblings().removeClass('active');
    applyClasses();
});

function applyClasses() {
    var classes = [
        $(".skins").val(),
        $(".layout").val(),
        $(".colors span.active").data('color')
    ];
    
    $('body').removeClass().addClass(classes.join(' '));
}

applyClasses(); // on load