JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<script src="http://designshack.net/tutorialexamples/styleswitcher/styleswitcher.js"></script>
<!-- switcher  -->      
<div class="style-switcher">
          <div class="style default">
            <a href="#">Default</a>
          </div>
          
          <div class="style blue">
            <a href="#">Blue</a>
          </div>
        </div>


<div id="switcher-wrapper">
  <div id="switcher-toggle"></div>
    <div id="switcher" class="switcher">
      <div id="switch-color" class="switcher-section">
        <div class="section-label">Switch Color</div>
          <div class="section-wrapper">
            <div class="list-image-title">Colour Scheme</div>
              <ul class="list-image-switcher">
               <li>
               <a title="Default" class="css" href="/"onclick="setActiveStyleSheet('default'); return false;">Default</a>
                </li>
                <li>
                <a title="Blue" class="css" href="/" onclick="setActiveStyleSheet('blue'); return false;">Blue</a>
                </li>
              </ul>
            </div>
           </div>
       
        <!-- background images-->
        
    <div id="switch-bg" class="switcher-section">
      <div class="section-label">Background Switcher</div>
        <div class="section-wrapper">
          <div class="list-image-title">Background Image</div>
            <ul class="list-image-switcher">
                <li class="one"><a title="One" href="#"></a></li>
                <li class="two"><a title="Two" href="#"></a></li>
                <li class="three"><a title="Three" href="#"></a></li>    
</ul>
          </div>
        </div>
      </div>
    </div>

CSS

/* Switcher Styles*/

#switcher-wrapper {
    left: 0;
    max-width: 185px;
    position: fixed;
    top: 120px;
    z-index: 9999;
}
#switcher {
    clear: both;
    font-family: 'Helvetica Neue',Arial,sans-serif;
    font-size: 11px;
    font-weight: normal;
    line-height: 18px;
    margin: 0;
    padding: 0;
    width: 100%;
}
#switcher a {
    color: hsl(0, 0%, 13%);
    text-decoration: none;
}
#switcher .switcher-section {
    border-top: 1px solid hsl(0, 0%, 87%);
    margin-bottom: 5px;
}
#switcher .switcher-section:nth-last-child(1) {
    margin-bottom: 0;
}
#switcher .section-wrapper {
    padding: 5px 10px 10px 15px;
}
#switcher .section-label {
    background: none repeat scroll 0 0 hsl(0, 0%, 93%);
    border-bottom: 1px solid hsl(0, 0%, 87%);
    color: hsl(0, 0%, 20%);
    font-weight: bold;
    margin: 0 0 5px;
    padding: 5px 10px;
    text-shadow: 1px 1px 0 hsl(0, 0%, 100%);
}
#switcher .list-image-switcher {
    list-style: none outside none;
    margin: 0 0 5px;
    overflow: hidden;
    padding: 0;
}
#switcher .list-image-switcher li {
    float: left;
    margin: 3px 10px 5px 0;
}
#switcher .list-image-switcher li a {
    border: 1px solid hsl(0, 0%, 80%);
    box-shadow: 0 0 2px hsla(0, 0%, 0%, 0.1);
    display: block;
    height: 20px;
    outline: medium none;
    text-indent: -9999px;
    transition: all 0.2s linear 0s;
    width: 20px;
}
#switcher .list-image-switcher li a:hover {
    border: 1px solid hsl(0, 0%, 67%);
    box-shadow: 0 0 3px hsla(0, 0%, 0%, 0.3);
}
#switcher .list-image-switcher li a img {
    background: none repeat scroll 0 0 hsl(0, 0%, 100%);
    display: block;
    height: 20px;
    text-indent: -9999px;
    width: 20px;
}
#switcher .list-image-title {
    color: hsl(0, 0%, 13%);
    padding: 5px 0;
}
#switcher-toggle {
    background: url("http://dummyimage.com/30x30/000000/fff&text=>") no-repeat scroll hsl(0, 0%, 94%);
    border: 1px solid hsl(0, 0%, 87%);
    cursor: pointer;
    height: 30px;
    left:...

JavaScript

//please look at the styleswitcher.js file added in "Manage Resources"

//switcher toggle (how can I hide it by default?)
$('#switcher-toggle').click(function(){
if($(this).css('left') == '138px') {
$(this).css('left', '0px');
$(this).next().hide();
}
else {
$(this).css('left','138px');
$(this).next().show();
}
}); 

//Background image but it is not picking image and just showing background color

$(document).ready(function(){ 

        $("li.one").click( function(){ $
        ("body").removeClass('bg2 , bg3').addClass("bg1");
    });

    $("li.two").click( function(){ $
        ("body").removeClass("bg1 , bg3").addClass("bg2");
    });

    $("li.three").click( function(){ $
        ("body").removeClass("bg1 , bg2").addClass("bg3");
    }); 

});