JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<nav class="nav">
	<div class="row">
		<div class="col-4 sr-block">
			<h1 class="brand"><a href="index.php">Aveera<sup>CMS</sup></a></h1>
			<a id="pull"><i class="fa fa-bars fa-lg"></i></a>
		</div>
		<div class="col-8 sr-block">
			<ul id="nav-visible">
				<li><input type="search" placeholder="Search..." /></li>
				<li><a href="#" class="has-badge" data-badge="2">Notifications <span class="fa fa-flag" id="notify"></span></a></li>
				<li><a href="#" class="has-badge" data-badge="1">Messages <span class="fa fa-flag" id="notify"></span></a></li>
				<li class="active">
					<a id="profileToggle">Username <i class="fa fa-caret-down"></i></a>
					<ul id="profileList">
						<li><a href="#">Profile</a></li>
						<li><a href="../inc/logout.php">Logout</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</nav>

SCSS

*,
*:after,
*:before {
	margin: 0;
	padding: 0;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	outline: none;
}
%clearfix {
	*zoom: 1;
	
	&:before,  &:after {
		content: " ";
		display: table;
	}
	&:after {
		clear: both;
	}
}
$maxCol: 12;
$gridMaxWidth: 65em;
$breakpointSmall: "only screen and (min-width: 20em)";
$breakpointMedium: "only screen and (min-width: 30em)";

.container {
	width: 100%;
	margin: 0 auto;
}
.container,
.row {
	@extend %clearfix;
}
.container:after,
.row:after {
	content: "";
	display: table;
	clear: both;
}
[class*='col-'] {
	float: left;
	padding: 1em;
	width: 100%;
	min-height: 1px;
}

@media #{$breakpointMedium} {
	.container {
		width: 95%;
		max-width: 65em;
	}

	@for $i from 1 through $maxCol {
		.col-#{$i} {
			width: 100% / $maxCol * $i;
		}
	}
}
@mixin transform($transforms) {
  -moz-transform: $transforms;
  -o-transform: $transforms;
  -ms-transform: $transforms;
  -webkit-transform: $transforms;
  transform: $transforms;
}


@mixin transition($args) {
    -webkit-transition: #{$args};
    -moz-transition: #{$args};
    -ms-transition: #{$args};
    -o-transition: #{$args};
    transition: #{$args};
}

@mixin keyframes($animation-name) {
  @-webkit-keyframes $animation-name {
    @content;
  }
  @-moz-keyframes $animation-name {
    @content;
  }  
  @-ms-keyframes $animation-name {
    @content;
  }
  @-o-keyframes $animation-name {
    @content;
  }  
  @keyframes $animation-name {
    @content;
  }
}
@mixin animation($str) {
  -webkit-animation: #{$str};
  -moz-animation: #{$str};
  -ms-animation: #{$str};
  -o-animation: #{$str};
  animation: #{$str};      
}

@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* PAGE STYLES */
h1.brand {
	color: #27344C;
	text-transform: uppercase;
	a {
		text-decoration: none;
		color: #27344C;
	}
}
nav.nav {
	background:...

JavaScript

$(function() {
	$('#pull').on('click', function() {
		$('#nav-visible').slideToggle().css({'visibility': 'visible', 'display': 'block'});
	});
	$('#profileToggle').on('click', function() {
		$('#profileList').slideToggle().css({'visibility': 'visible', 'display': 'block'});
		$(this).addClass('active');
	});
});