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">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" id="tabit">
        <li class="active"><a href="#home" data-toggle="tab">Home</a>

        </li>
        <li><a href="#reports" data-toggle="tab">Reports</a>

        </li>
        <li><a href="#settings" data-toggle="tab">Settings</a>

        </li>
    </ul> <a href="#" class="btn btn-danger btn-lg" id="opener"><i class="glyphicon glyphicon-align-justify"></i></a>

    <p>
        <!-- Tab panes -->
        <div class="tab-content">
            <div class="tab-pane active" id="home">
                <div class="container">
                    <form class="form-signin" role="form">
                         <h3 class="form-signin-heading">Please sign in</h3>

                        <input type="email" class="form-control" placeholder="User name" required="" autofocus="">
                        <input type="password" class="form-control" placeholder="Password" required="">
                        <label class="checkbox">
                            <input type="checkbox" value="remember-me">Remember me</label>
                        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
                    </form>
                    <p>Tämä voisi olla myös modaalina ikkunana keskellä näyttöä, kun kirjaudutaan sisään.</p>
                </div>
            </div>
            <div class="tab-pane" id="reports">This is the reports page.
                <table id="example" class="table table-hover " cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Pvm</th>
                            <th>Alku</th>
                            <th>Loppu</th>
 ...

CSS

html, body {
    background: url(http://cdn.theatlantic.com/static/mt/assets/science/US-after.jpeg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:100%;
}
#slide-panel {
    width:300px;
    height:1000px;
    padding:10px;
    background: rgba(255, 255, 255, 0.9);
    margin-left:-300px;
}
#opener {
    float:right;
    margin:20px -62px 0px 0px;
    border-radius:0;
}

form_signin {
    width:320px;
}

JavaScript

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

	$(document).ready(function () {

	    $('#tabit a').click(function (e) {
	        e.preventDefault()
	        $(this).tab('show')
	    })


	    $('#example').dataTable();
	});