JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<!------ Include the above in your HEAD tag ---------->

    <nav class="navbar navbar-fixed-left navbar-minimal animate" role="navigation">
		<div class="navbar-toggler animate">
			<span class="menu-icon"></span>
		</div>
		<ul class="navbar-menu animate">
			<li>
				<a href="#about-us" class="animate">
					<span class="desc animate"> Who We Are </span>
					<span class="glyphicon glyphicon-user"></span>
				</a>
			</li>
			<li>
				<a href="#blog" class="animate">
					<span class="desc animate"> What We Say </span>
					<span class="glyphicon glyphicon-info-sign"></span>
				</a>
			</li>
			<li>
				<a href="#contact-us" class="animate">
					<span class="desc animate"> How To Reach Us </span>
					<span class="glyphicon glyphicon-comment"></span>
				</a>
			</li>
		</ul>
	</nav>

<!-- START OF HTML FOR DEMO - NOT NEEDED -->
<div class="container">
	<div class="row">
		<div class="col-sm-offset-3 col-sm-6 col-md-offset-4 col-md-4">
			<h1 class="title">Menu</h1>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-offset-3 col-sm-6 col-md-offset-4 col-md-4 white-background">
			 <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie felis et lacus pulvinar, a vehicula dolor suscipit. Praesent blandit tellus et fermentum hendrerit. Ut tempus eu justo vel ultricies. Nunc consectetur libero ac erat blandit eleifend. Morbi id hendrerit risus. Nam aliquet sit amet turpis non condimentum. Vestibulum lobortis blandit elit vel scelerisque. Nullam dui risus, pulvinar at cursus ut, condimentum eget elit. In tincidunt rhoncus enim a euismod. Maecenas id pretium velit, ut venenatis sem. Vivamus sed lorem at nulla cursus consectetur. In tincidunt laoreet rhoncus. Fusce hendrerit massa quis mauris venenatis sollicitudin. Duis finibus...

CSS

/* START OF DEMO CSS - NOT NEEDED */
body {
	background: linear-gradient(-45deg, #3B3DB4, #E73C7E, #23A6D5, #5451BA);
	background-size: 400% 400%;
	-webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite;
	color: rgb(255, 255, 255);
}
.white-background {
	background-color: rgb(255, 255, 255);
	color: rgb(51, 51, 51);
	padding-top: 10px;
	border-radius: 4px;
}
.title {
	font-size: 3em;
	font-weight: 700;
	text-shadow: 0px 0px 5px rgb(51, 51, 51);
	text-shadow: 0px 0px 5px rgba(51, 51, 51, 0.8);
	text-align: center;
}
#fullscreen {
    position: fixed;
    top: 10px;
    right: 10px;
}
/* END OF DEMO CSS */

    .animate {
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.navbar-fixed-left {
		position: fixed;
		top: 0px;
		left: 0px;
		border-radius: 0px;
	}

	.navbar-minimal {
		width: 60px;		
		min-height: 60px;
		max-height: 100%;
		background-color: rgb(51, 51, 51);
		background-color: rgba(51, 51, 51, 0.8);
		border-width: 0px;
		z-index: 1000;
	}

	.navbar-minimal > .navbar-toggler {
		position: relative;
		min-height: 60px;
		border-bottom: 1px solid rgb(81, 81, 81);
		z-index: 100;
		cursor: pointer;
	}

	.navbar-minimal.open > .navbar-toggler,
	.navbar-minimal > .navbar-toggler:hover {
		background-color: rgb(255, 90, 10);
	}

	.navbar-minimal > .navbar-toggler > span {
		position: absolute;
		top: 50%;
		right: 50%;
		margin: -8px -8px 0 0;
		width: 16px;
		height: 16px;
		background-image:...

JavaScript

$(function () {
    /* START OF DEMO JS - NOT NEEDED */
    if (window.location == window.parent.location) {
        $('#fullscreen').html('<span class="glyphicon glyphicon-resize-small"></span>');
        $('#fullscreen').attr('href', 'http://bootsnipp.com/mouse0270/snippets/PbDb5');
        $('#fullscreen').attr('title', 'Back To Bootsnipp');
    }    
    $('#fullscreen').on('click', function(event) {
        event.preventDefault();
        window.parent.location =  $('#fullscreen').attr('href');
    });
    $('#fullscreen').tooltip();
    /* END DEMO OF JS */
    
    $('.navbar-toggler').on('click', function(event) {
		event.preventDefault();
		$(this).closest('.navbar-minimal').toggleClass('open');
	})
});