JSFiddle - React, Tailwind, and code Playground

by chrisloughnane

HTML

<!--
	stylesheet
-->
<style type="text/css">@import url("http://portfolio.chrisloughnane.net/stylesheets/default.css");</style> 
<style type="text/css">@import url("http://portfolio.chrisloughnane.net/stylesheets/social.css");</style> 
<!-- cube style to allow CSS change -->
<style type="text/css">@import url("http://portfolio.chrisloughnane.net/stylesheets/default-cube.css");</style> 
<link rel="stylesheet" href="http://portfolio.chrisloughnane.net/stylesheets/blackandwhite.css" />

<div id="wrapper-center">
    <div id="experiment">

        <div class="cube nine">
            <div class="topFace">
                <div></div>
             </div>
            <div class="leftFace"></div>
            <div class="rightFace"></div>
        </div>

        <div class="cube eight">
            <div class="topFace">
                <div>sandbox</div>
             </div>
            <div class="leftFace" data-link="http://portfolio.chrisloughnane.net/sandbox.html">
            	<img src="http://portfolio.chrisloughnane.net/images/sandbox-co.png">
            </div>
            <div class="rightFace"></div>
        </div>


        <div class="cube seven">
            <div class="topFace">
                <div></div>
             </div>
            <div class="leftFace"></div>
            <div class="rightFace"></div>
        </div>

        <div class="cube one highlight">
            <div class="topFace">
                <div>
                    college years</br>
                    one & two
                </div>
            </div>
            <div class="leftFace" data-link="http://portfolio.chrisloughnane.net/firstyear.html">
                <img src="http://portfolio.chrisloughnane.net/images/first_year.png">
            </div>
            <div class="rightFace" data-link="http://portfolio.chrisloughnane.net/secondyear.html">
                <img src="http://portfolio.chrisloughnane.net/images/second_year.png">
            </div>
        </div>

        <div...

CSS

#wrapper-center { top: -500px; }

JavaScript

$(function() {
    
    	$('#changebw').click(function(){
		$('.eight > .leftFace > img').attr('src',"http://portfolio.chrisloughnane.net/images/sandbox-bw.png");
		$("link").attr("href", "http://portfolio.chrisloughnane.net/stylesheets/blackandwhite.css");
		$.cookie('state', 'blackandwhite', { expires: 365, path: '/', domain: 'portfolio.chrisloughnane.net' });
		$(this).fadeOut('fast', function() {
			$('#changeco').fadeIn('fast');
		});
		
		return false;
	});
   
	$('#changeco').click(function(){
		$('.eight > .leftFace > img').attr('src',"http://portfolio.chrisloughnane.net/images/sandbox-co.png");
		$("link").attr("href", "http://portfolio.chrisloughnane.net/stylesheets/colour.css");
		$.cookie('state', 'colour', { expires: 365, path: '/', domain: 'portfolio.chrisloughnane.net' });
		$(this).fadeOut('fast', function() {
			$('#changebw').fadeIn('fast');
		});
		return false;
	});
    $('#changebw').hide();
});