JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<!-- top panel -->
<div id="thpl">
  <a href="#" id="thpl_button">
    <i class="fa fa-gear"></i>
  </a>
  <div class="thpl_inner">
    <h2 class="thpl_header">
      Style theme
    </h2>
  </div>
  <div class="thpl_inner">
    <a href="#" class="thpl_link add_wide" title="Wide">Wide</a>
    <a href="#" class="thpl_link add_boxed" title="Boxed">Boxed</a>
    <small class="info_container thpl_info">&nbsp;</small>
  </div>
  <div class="thpl_inner">
    <h3 class="thpl_header">Background</h3>
    
    <small>Patterns</small><br />
    <a href="#" class="backgrounds halftone"></a>
    <a href="#" class="backgrounds geometry2"></a>
    <a href="#" class="backgrounds food"></a>
    <a href="#" class="backgrounds startdust"></a>
    <a href="#" class="backgrounds squared_metal"></a>
    <a href="#" class="backgrounds purty_wood"></a>
    <br />
    <small>colors</small><br />	
    <a href="#" title="turquoise" class="backgrounds turquoise"></a>
    <a href="#" title="emerald" class="backgrounds emerald"></a>
    <a href="#" title="peterRiver" class="backgrounds peterriver"></a>
    <a href="#" title="amethyst" class="backgrounds amethyst"></a>
    <a href="#" title="wetAsphalt" class="backgrounds wetAsphalt"></a>
    <a href="#" title="sunflower" class="backgrounds sunflower"></a>
    <a href="#" title="orange" class="backgrounds orange"></a>
    <a href="#" title="carrot" class="backgrounds carrot"></a>
    <a href="#" title="alizarin" class="backgrounds alizarin"></a>
    <a href="#" title="white" class="backgrounds white"></a>
    <a href="#" title="concrete" class="backgrounds concrete"></a>
    <a href="#" title="silver" class="backgrounds silver"></a>
    <small class="info_background thpl_info">&nbsp;</small>
  </div>
  <div class="thpl_inner">
    <h3 class="thpl_header">
      Color Skins
    </h3>
    <a href="#" title="turquoise" class="colors turquoise"></a>
    <a href="#" title="emerald" class="colors emerald"></a>
    <a href="#" title="peterRiver"...

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

body {
  position: relative;
  font-family: "Serif", sans-serif;
  font-size: 13px;
  line-height: 1.42857143;
  background: #2c3e50;
}

/* backgrounds 
----------------------------*/
.halftone {
  background: url(http://subtlepatterns.com/patterns/halftone.png);
}

.geometry2 {
  background: url(http://subtlepatterns.com/patterns/geometry2.png);
}

.food {
  background: url(http://subtlepatterns.com/patterns/food.png);
}

.startdust {
  background: url(http://subtlepatterns.com/patterns/stardust.png);
}

.squared_metal {
  background: url(http://subtlepatterns.com/patterns/squared_metal.png);
}

.purty_wood {
  background: url(http://subtlepatterns.com/patterns/purty_wood.png);
}

/* colors 
----------------------------*/
.turquoise {
  background-color: #1abc9c;
}

.emerald {
  background-color: #2ecc71;
}

.peterriver {
  background-color: #3498db;
}

.amethyst {
  background-color: #9b59b6;
}

.wetAsphalt {
  background-color: #34495e;
}

.sunflower {
  background-color: #f1c40f;
}

.orange {
  background-color: #f39c12;
}

.carrot {
  background-color: #e67e22;
}

.alizarin {
  background-color: #e74c3c;
}

.white {
  background-color: white;
}

.concrete {
  background-color: #95a5a6;
}

.silver {
  background-color: #bdc3c7;
}

.color_turquoise {
  color: #1abc9c;
}

.color_emerald {
  color: #2ecc71;
}

.color_peterriver {
  color: #3498db;
}

.color_amethyst {
  color: #9b59b6;
}

.color_wetAsphalt {
  color: #34495e;
}

.color_sunflower {
  color: #f1c40f;
}

.color_orange {
  color: #f39c12;
}

.color_carrot {
  color: #e67e22;
}

.color_alizarin {
  color: #e74c3c;
}

.color_white {
  color: white;
}

.color_concrete {
  color: #95a5a6;
}

.color_silver {
  color: #bdc3c7;
}

/* thpl basic 
----------------------------*/
#thpl {
  display:...

JavaScript

// develoment  init plugin in end of code
var thpl = (function(){
  
  'use strict';
  
  return {
    
    
    // ready for the war
    _ready:function(el){
      // vars
      var panel  = document.querySelector('#thpl'),
          btn = document.querySelector('#thpl_button'),
          self = this;
      
      // on init add class
      panel.classList.add('thpl_'+el);
      btn.classList.add('btn_'+el);
      
      // wait and load other fn
      var t = setTimeout(function(){
        self._init(el); 
        clearTimeout(t);
      },100);
      
    },
    
    
    // init other functions
    // el = left,top,right,bottom
    _init:function(el){
      this._thpl(el);
      this._stylePage();
      this._backgrounds();
      this._colors();
      this._reset();
      return el;
    },
    
    
    
    // open/close panel
    _thpl:function(element){
      // vars
      var btn = document.querySelector('.btn_'+element),
          panel = document.querySelector('.thpl_'+element);
      // listener
      btn.addEventListener('click',function(e){
        e.preventDefault();
          panel.classList.toggle('thpl_open_'+element);
      },false);
      // return 
      return element;
    },
    
    
    
    // boxed / wide function
    _stylePage:function(){
      // vars
      var page = document.querySelector('.page'),
          wide = document.querySelector('.add_wide'),
          boxed = document.querySelector('.add_boxed'),
          info = document.querySelector('.info_container');
      
      // wide mode
      wide.addEventListener('click',function(e){
        // prevent scroll
        e.preventDefault();
        
        // if has class
        if(page.classList.contains('boxed')){
          page.classList.remove('boxed');
          page.classList.add('wide');
        }else{
          page.classList.add('wide');
        }
        
        // show info
        info.innerHTML = 'body class="wide"';
        
      },false);
      
      
      
    ...