JSFiddle - React, Tailwind, and code Playground

by Jscaptcha

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 <div ng-app='myModule' ng-controller='myController'>
            <div id='header' class="header navbar navbar-default navbar-fixed-top">
                <div class="container-fluid">
				<!-- begin mobile sidebar expand / collapse button -->
				<div class="navbar-header">
					<a href="index.html" class="navbar-brand"><span class="navbar-logo"></span> Color Admin</a>
					<button type="button" class="navbar-toggle" data-click="sidebar-toggled">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>
				<!-- end mobile sidebar expand / collapse button -->
				
				<!-- begin header navigation right -->
				<ul class="nav navbar-nav navbar-right">
					<li>
						<form class="navbar-form full-width">
							<div class="form-group">
								<input type="text" class="form-control" placeholder="Enter keyword">
								<button type="submit" class="btn btn-search"><i class="fa fa-search"></i></button>
							</div>
						</form>
					</li>
					<li class="dropdown">
						<a href="javascript:;" data-toggle="dropdown" class="dropdown-toggle f-s-14">
							<i class="fa fa-bell-o"></i>
							<span class="label">5</span>
						</a>
						<ul class="dropdown-menu media-list pull-right animated fadeInDown">
                            <li class="dropdown-header">Notifications (5)</li>
                            <li class="media">
                                <a href="javascript:;">
                                    <div class="media-left"><i class="fa fa-bug media-object bg-red"></i></div>
                                    <div class="media-body">
                                        <h6 class="media-heading">Server Error Reports</h6>
                                        <div class="text-muted f-s-11">3 minutes ago</div>
                                    </div>
               ...

CSS

.navbar.navbar-default {
                        background: #fff;
                    }
            .navbar-brand {
    margin-right: 10px;
    padding: 12px 20px;
    height: 54px;
    width: 220px;
    font-weight: 100;
    font-size: 18px;
    line-height: 30px;
}
            .navbar-toggle {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    border: none;
}
            .navbar-form {
    margin: 12px 0;
}
            .form-control {
    border: 1px solid #ccd0d4;
    box-shadow: none;
    font-size: 12px;
            }
            .navbar-form .btn-search {
    position: absolute;
    right: 15px;
    top: 12px;
    height: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: none;
    background: 0 0;
            }
            .sidebar {
    position: absolute;
    padding-top: 54px;
    z-index: 1010;
}
            .sidebar, .sidebar-bg {
    top: 0;
    bottom: 0;
    background: #2d353c;
    left: 0;
    width: 220px;
}
            .sidebar-bg {
    position: fixed;
    z-index: 1000;
}
            
            .sidebar .nav>li.nav-profile {
    padding: 20px;
    color: #fff;
    background: #1a2229;
}
.sidebar .nav>li.nav-profile .image {
    float: left;
    width: 34px;
    height: 34px;
    margin-top: 2px;
    margin-right: 15px;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}            
 .sidebar .nav>li.nav-profile {
  
    color: #fff;
}           
   .sidebar .sub-menu {
    padding: 10px 0 10px 30px;
    margin: 0;
    background: #1a2229;
    position: relative;
    display: none;
}         
 .sidebar .sub-menu>li>a {
    padding: 5px 20px;
    display: block;
    font-weight: 300;
    color: #889097;
    text-decoration: none;
    position: relative;
}           
       
            .widget.widget-stats {
    position: relative;
}
            
            .widget {
    margin-bottom: 20px;
    color: #fff;
}
            .bg-green {
    background:...

JavaScript

var myModule = angular.module('myModule',['ui.router']);
myModule.controller('myController',myController);
function myController($scope)
{
	$scope.message ='Good Morning';
}
myModule.config(function($stateProvider, $urlRouterProvider){
    $stateProvider
        .state('dashboard',{
        url:"/dashboard",
        templateUrl:"dashboard.html"
    })
     .state('dashboard.profile',{
        url:"/profile",
        templateUrl:"partial/state1.html"
    })
     .state('dashboard.setting',{
        url:"/profile",
        templateUrl:"partial/state2.html"
    }); 
    
    $urlRouterProvider.otherwise("/dashboard");
});