JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<ul class="nav nav-tabs slider">
<li id="id1" class=""><a href="javascript:;"><i class="fa fa-warning" style="color: rgb(255, 0, 0);"></i> Tab1</a></li>
<li id="id2"><a href="javascript:;"><i class="fa icon-home" style="color: rgb(255, 0, 0);"></i> Tab2</a></li>
<li id="id3"><a href="javascript:;"><i class="fa icon-home" style="color: rgb(255, 0, 0);"></i> Tab 3</a></li>
<li id="id4"><a href="javascript:;"><i class="fa icon-home" style="color: rgb(255, 0, 0);"></i> Tab 4</a></li>
<li id="id5"><a href="javascript:;"><i class="fa icon-home" style="color: rgb(255, 0, 0);"></i> Tab 5</a></li>
<li id="id6"><a href="javascript:;">Tab 6</a></li>
<li id="id7"><a href="javascript:;">Tab 7</a></li>
<li id="id8"><a href="javascript:;">Tab 8</a></li>
<li id="id9"><a href="javascript:;">adsadsadsad Tab 9</a></li>
<li id="id10" class="active"><a href="javascript:;">Tab 10</a></li>
<li id="id11"><a href="javascript:;">Tab 11</a></li>
<li id="id12"><a href="javascript:;">Tab 12</a></li>
<li id="id13"><a href="javascript:;">Tab 13</a></li>
<li id="id14"><a href="javascript:;">Tab14</a></li>
</ul>
CSS
.slider {
position: fixed;
top: 168px;
background-color: white;
left: 48px;
right: 48px;
z-index: 3;
padding-top: 6px;
}
.nav-tabs {
border-bottom: 1px solid #c4c4c4;
}
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
ol, ul {
margin-top: 0;
margin-bottom: 10px;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}