JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="top-nav-mobile">
		<div role="tabpanel" class="top-nav-btns">

			<ul class="nav nav-tabs" role="tablist">
				<li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-shopping-cart"></i></a></li>
				<li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-signal"></i></a></li>
				<li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-times"></i></a></li>
				<li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-bell"></i></a></li>
				<li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-search"></i></a></li>
				<li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-money"></i></a></li>
				<li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-bug"></i></a></li>
				<li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-wheelchair"></i></a></li>
				<li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-envelope"></i></a></li>
				<li role="presentation" class="active"><a href="#asdf" aria-controls="asdf" role="tab" data-toggle="tab"><i class="fa fa-bug"></i></a></li>
			</ul>

			<div class="tab-content">
				<div role="tabpanel" class="tab-pane active"...

CSS

.top-nav-mobile {
	height: calc(100% - 50px);
	background: white;
	border-left: 1px solid #d4d5d0;
	border-right: 1px solid #d4d5d0;
	display: block;
	position: fixed;
	z-index: 90;
	width: 280px;
	right: 40%;
}
.top-nav-mobile .top-nav-btns {
	width: 280px;
	overflow: hidden;
}
.top-nav-mobile .nav li {
	margin-bottom: 0px;
}
.top-nav-mobile .nav-tabs {
	border-bottom: none;
	width: 443px;
}
.top-nav-mobile .nav-tabs li.active a, .nav-tabs li.active a:focus {
	color: white;
	background: #3d464d;
	border: none;
	border-radius: 0px;
	margin-right: 0px;
}
.top-nav-mobile .nav-tabs li.active a:hover {
	color: white;
	background: #363e45;
	border: none;
	border-radius: 0px;
	margin-right: 0px;
}