JSFiddle - React, Tailwind, and code Playground

by paulftw

HTML

<link rel="stylesheet" href="//flatfull.com/themes/angulr/css/app.min.css">
<div class='navbar'>
    <div class="navbar-header bg-success">
        <button class="pull-right visible-xs dk">
          <i class="glyphicon glyphicon-cog"></i>
        </button>
        <button class="pull-right visible-xs" ui-toggle-class="off-screen" data-target=".app-aside" ui-scroll="app">
          <i class="glyphicon glyphicon-align-justify"></i>
        </button>
        <!-- brand -->
        <a href="#/" class="navbar-brand text-lt">
          <i class="fa fa-btc"></i>
          <img src="img/logo.png" alt="." class="hide" />
          <span class="hidden-folded m-l-xs ng-binding">Angulr</span>
        </a>
      </div>
    <div class="collapse navbar-collapse box-shadow bg-white-only">
        <!-- buttons -->
        <div class="nav navbar-nav m-l-sm hidden-xs">
          <a href="" class="btn no-shadow navbar-btn" ng-click="app.settings.asideFolded = !app.settings.asideFolded">
            <i class="fa fa-dedent fa-fw"></i>
          </a>
          <a href="" class="btn no-shadow navbar-btn" ui-toggle-class="show" target="#aside-user">
            <i class="icon-user fa-fw"></i>
          </a>
        </div>
        <!-- / buttons -->

        <!-- link and dropdown -->
        <ul class="nav navbar-nav hidden-sm">
          <li class="active">
            <a href=""><i class="fa fa-cloud-upload fa-fw"></i> <span translate="header.navbar.UPLOAD" class="ng-scope">Upload</span></a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fa fa-fw fa-plus visible-xs-inline-block"></i>
              <span translate="header.navbar.new.NEW" class="ng-scope">New</span> <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#" translate="header.navbar.new.PROJECT"...