JSFiddle - React, Tailwind, and code Playground

by Ali Khaled

HTML

<script src="https://www.polymer-project.org/components/paper-ripple/paper-ripple.html"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.1.4/assets/css/emojione.min.css?buster=fbe8ny4a4586je3yyweyl8n6jcrld0yn06giq60gm8set4yzc8">
<link rel="stylesheet" href="https://csgobig.com//css/app.css">


 
 

<div class="sidebar raised">
	
	<div class="top raised">
		<ul class="quick-controls noselect">
			<a class="volume">
				<li ng-click="toggleSound()"><!-- ngIf: $root.user.sound --><i ng-if="$root.user.sound" class="fa fa-volume-up ng-scope"></i><!-- end ngIf: $root.user.sound --><!-- ngIf: !$root.user.sound --></li>
				<input class="input ng-pristine ng-untouched ng-valid" ng-model="input.range" ng-change="soundChanged()" id="rangeJuke" type="range" min="0" max="100" step="1">
				<div class="leftCont">
					<span id="left" style="width: 50%"></span>
				</div>
			</a>
			<a ng-click="toggleDropdown()">
				<!-- ngIf: showForDesktop -->
				<li>
					<!-- ngIf: !dropDownToggle -->
					<!-- ngIf: dropDownToggle --><i ng-if="dropDownToggle" class="fa fa-chevron-up ng-scope"></i><!-- end ngIf: dropDownToggle -->
				</li>
			</a>
			<a class="toggler" ng-click="$root.sidebarToggled = true">
				<!-- ngIf: showForDesktop -->
				<li><i class="fa fa-arrow-left"></i></li>
			</a>
		</ul>
		<ul class="pages">
			<div ng-class="{'hid': !dropDownToggle}">
				<a ui-sref="app.roulette" ng-class="{'active': getPath() == '/roulette'}" id="/roulette" href="/roulette" class="active">
					<!-- ngIf: showForDesktop -->
					<li>Roulette<i class="fa fa-circle-o"></i></li>
				</a>
				<a ui-sref="app.jackpots" ng-class="{'active': getPath() == '/jackpots'}" id="/roulette" href="/jackpots">
					<!-- ngIf: showForDesktop -->
					<li>Jackpots<i class="fa fa-money"></i></li>
				</a>
				<a>
					
					<li>Coinflip<i class="fa fa-database"></i></li>
				</a>
				<a ng-hide="$root.rpsDisabled" ui-sref="app.rps.listings" ng-class="{'active':...

CSS

@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}


.sidebar {
    -webkit-transition: box-shadow .2s cubic-bezier(.4,0,.2,1),all 250ms ease!important;
    transition: box-shadow .2s cubic-bezier(.4,0,.2,1),all 250ms ease!important;
    position: absolute!important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    background: rgba(64,63,63,.9);
    color: #f8f8f8;
    top: 50px;
    bottom: 0;
    left: 0;
    width: 300px;
    z-index: 99;
}

.raised {
    -webkit-transition: box-shadow .2s cubic-bezier(.4,0,.2,1);
    transition: box-shadow .2s cubic-bezier(.4,0,.2,1);
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
    outline: 0!important;
    display: block;
    border: none;
    position: relative;
    color: #f8f8f8;
}
.sidebar .togglerOutside {
    font-size: 20px;
    position: absolute;
    right: -55px;
    height: 49px;
    width: 55px;
    background: rgba(64,63,63,.8);
    text-align: center;
}
.sidebar .togglerOutside i {
    position: relative;
    top: 10px;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}