JSFiddle - React, Tailwind, and code Playground

by james0n

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div id="slide-panel">
    
    <a href="#" class="btn btn-danger btn-lg" id="opener"><i class="glyphicon glyphicon-align-justify"></i></a>
    <h1>KOUTSI</h1>
    <h2>v0.0.1</h2><p>

    <button type="button" class="btn btn-primary btn-block">Tallenna muodostelma</button>
    <button type="button" class="btn btn-primary btn-block">Lataa muodostelma</button>
    <p></p>
    <button type="button" class="btn btn-primary btn-block">Piirrä</button>
    <button type="button" class="btn btn-primary btn-block">Tyhjennä</button>
    <p></p>
    <button type="button" class="btn btn-primary btn-block">Pysäytä peli</button>
    <p> 

</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Quantico);

html, body {
    background: url(http://www.alldesigncreative.com/wp-content/uploads/2014/08/green-grass-texture.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:100%;
}

h1 {

    letter-spacing: -1px;
    font-weight: 300;
    font-size: 19px;
    opacity: 0.95;
}

h2 {

    font-weight: 300;
    font-size: 13px;
    opacity: 0.8;
}

h3 {

    text-transform: uppercase;
    margin-top: 10px;
    font-size: 11px;
}

 h3:before {

    margin-right: 2px;
    font-size: 14px;
    content: '\203A';
}

#slide-panel {


    font-family: 'Quantico', sans-serif;
    width:200px;

    padding:10px;
    background: rgba(0, 0, 0, 0.5);
    margin-left:-200px;
    color: #fff;
}
#opener {
    float:right;
    margin:20px -62px 0px 0px;
    border-radius:0;
}
.zoom {
    zoom: 2;
}

.zoom-moz {
    -moz-transform: scale(2);
    -moz-transform-origin: 0 0;
}

JavaScript

$('#opener').on('click', function () {
	    var panel = $('#slide-panel');
	    if (panel.hasClass("visible")) {
	        panel.removeClass('visible').animate({
	            'margin-left': '-200px'
	        });
	    } else {
	        panel.addClass('visible').animate({
	            'margin-left': '0px'
	        });
	    }
	    return false;
	});

	$(document).ready(function () {


	});