JSFiddle - React, Tailwind, and code Playground

by Oussama bouyardane

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="100%">Wide</option>
            <option value="90%">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"></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 the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a...

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);
}

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;
  color: #2d2d2d;
}

.light .header{
  background: #ffffff;
  color: #2d2d2d;
}

/* COLORS */
.sdefault {
	display: block;
	height: 30px;
  padding: 0;
  margin: 0...

JavaScript

$("body").addClass("wide light blue");

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

// Theme Layout Switch
$(".layout").change(function() {
	var layout = $(".layout").val();
	$(".wrapper").css("width",layout);
});

// Theme Skins Switch
$(".skins").change(function() {
	var skin = $(".skins").val();
	$("body").toggleClass(skin);
});

// Theme Colors Switch
$(".colors span").each(function() {
     var data_color = $(this).attr("data-color");
     $(this).click(function() {
         $("body").toggleClass(data_color);
     });
});