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">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="toolbar">
   <div class="row">
               			
   <div class="col-xs-2">                              
<a class="btn-lg btn-primary" href="#"> 
    <i class="fa fa-pause fa-lg"></i>
</a>
       </div>
   <div class="col-xs-2">                              
       
<a class="btn-lg btn-danger" href="#"> 
    <i class="fa fa-circle fa-lg"></i>
</a>
       </div>
   <div class="col-xs-2">                              
<a class="btn-lg btn-success" href="#"> 
    <i class="fa fa-play fa-lg"></i>
</a>
       </div>
   <div class="col-xs-2">                              
<a class="btn-lg btn-primary" href="#"> 
    <i class="fa fa-pencil fa-lg"></i>
</a>
       </div>
   <div class="col-xs-2">                              
<a class="btn-lg btn-primary" href="#"> 
    <i class="fa fa-wrench fa-lg"></i>
</a>
       </div>     
          <div class="col-xs-2">                              
<a class="btn-lg btn-primary" href="#"> 
    <i class="fa fa-print fa-lg"></i>
</a>
       </div>     
    
  </div>

CSS

html, body {
      
    background-color:#6a6;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:100%;
     font-family:'Source Sans Pro', sans-serif;

}
.toolbar {
   
    bottom: 50px;
    padding: 20px;
    width: 460px;

    margin-top:200px;
    margin-left:auto;
    margin-right:auto;
    background-color:rgba(0,0,0, 0.3);
    border-radius:10px;
}

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 () {


	});