JSFiddle - React, Tailwind, and code Playground

by niki4810

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div class="navbar navbar-inverse">
    <div class="navbar-inner">
        <div class="container-fluid"> <a class="brand" href="#"><small><i class="icon-leaf"></i> Ace Admin</small> </a>

            <ul class="nav ace-nav pull-right">
                <li class="grey">	<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							<i class="icon-tasks"></i>
							<span class="badge">4</span>
						</a>

                    <ul class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-closer">
                        <li class="nav-header">	<i class="icon-ok"></i> 4 Tasks to complete</li>
                        <li>	<a href="#">
									<div class="clearfix">
										<span class="pull-left">Software Update</span>
										<span class="pull-right">65%</span>
									</div>
									<div class="progress progress-mini"><div class="bar" style="width:65%"></div></div>
								</a>

                        </li>
                        <li>	<a href="#">
									<div class="clearfix">
										<span class="pull-left">Hardware Upgrade</span>
										<span class="pull-right">35%</span>
									</div>
									<div class="progress progress-mini progress-danger"><div class="bar" style="width:35%"></div></div>
								</a>

                        </li>
                        <li>	<a href="#">
									<div class="clearfix">
										<span class="pull-left">Unit Testing</span>
										<span class="pull-right">15%</span>
									</div>
									<div class="progress progress-mini progress-warning"><div class="bar" style="width:15%"></div></div>
								</a>

                        </li>
                        <li>	<a href="#">
									<div class="clearfix">
										<span class="pull-left">Bug Fixes</span>
										<span class="pull-right">90%</span>
									</div>
									<div class="progress progress-mini progress-success...

CSS

.clearfix:before, .clearfix:after {
    content:"";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
    /* For IE 6/7 (trigger hasLayout) */
}

#main-container {
padding: 0;
position: relative;
}
#menu-toggler {
display: none;
}

.skin-1 #sidebar:before, #sidebar {
border-right: 0;
}

#sidebar {
width: 189px;
position: absolute;
margin-left: 0;
margin-top: 0;
border-right: 1px solid #CCC;
background-color: #FFF;
}

#sidebar-shortcuts {
background-color: #FAFAFA;
line-height: 37px;
max-height: 40px;
margin-bottom: 0;
border-bottom: 1px solid #DDD;
text-align: center;
}
#sidebar-shortcuts-large {
padding-bottom: 4px;
}
#sidebar-shortcuts-mini {
display: none;
font-size: 0;
width: 42px;
line-height: 18px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #FFF;
}
#sidebar-shortcuts {
line-height: 37px;
text-align: center;
}

.nav-list {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar-collapse {
border-bottom: 1px solid #E0E0E0;
background-color: #F3F3F3;
text-align: center;
padding: 3px 0;
position: relative;
}
#sidebar-collapse:before {
content: "";
display: inline-block;
height: 0;
border-top: 1px solid #E1E1E1;
position: absolute;
left: 15px;
right: 15px;
top: 13px;
}

sidebar-collapse>[class*="icon-"] {
display: inline-block;
cursor: pointer;
font-size: 14px;
color: #AAA;
border: 1px solid #BBB;
padding: 0 5px;
line-height: 18px;
border-radius: 16px;
background-color: #FFF;
position: relative;
}

.nav-list>li.active {
background-color: #FFF;
}
.nav-list>li:first-child {
border-top: 0;
}
.nav-list>li {
display: block;
padding: 0;
margin: 0;
border: 0;
border-top: 1px solid #FCFCFC;
border-bottom: 1px solid #E5E5E5;
position: relative;
}
.nav-list>li.active:after {
display: inline-block;
content: "";
position: absolute;
right: -2px;
top: -1px;
bottom: 0;
border-right: 2px solid #0B6CBC;
}


#main-content {
margin-left: 190px;
margin-right: 0;
margin-top: 0;
min-height: 100%;
padding: 0;
}

#breadcrumbs {
position:...