JSFiddle - React, Tailwind, and code Playground

by KARTHIKEYAN K

HTML

<body ng-controller="ctrl">

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavBar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">Bootstrap</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavBar">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Tickets</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="#">
                            <span class="glyphicon glyphicon-bell" aria-hidden="true"></span>
                            <span class="label label-warning pos">3</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
                            <span class="label label-danger pos">3</span>
                        </a>
                    </li>
                    <li><a href="#">Log out<span class="glyphicon glyphicon-log-out"></span></a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-3">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <p class="panel-title" ng-bind="greetings"></p>
                    </div>
                    <div class="panel-body">
                        <ul class="list-group">
                            <li...

CSS

body {
    background-color:#2C3E50;
}


.pos{
    position:absolute;
    top:5px;
    right:-5px;
}

.navbar-default {
  background-color: #1abc9c;
  border-color: #37b39a;
}

.panel > .panel-heading {
    background-color:#1abc9c;
    color: white;
    margin:0px;
    height:40px;
    border:none;
}

.panel-body
{
    margin-top:3px;
    background-color:#34495E;
}

.panel-footer
{
  background-color:#34495E;
  border:none;
}


.panel-footer a
{
    color:white;
}

.panel-footer a:hover
{
    color:white;
    text-decoration:none;
    border-bottom:1px solid #1abc9c; 
}

.glyphicon-arrow-right
{
    font-size:11px;
    font-weight:normal;
}

.glyphicon-flag
{
    color:mediumseagreen;
    padding-left:5px;
}

.glyphicon-log-out
{
      padding-left:5px;
}

.panel-default
{
    background-color:#2C3E50;
    border:none;
    border-bottom:2px solid  #1abc9c; 
}

.list-group > .list-group-item
{
    background-color:#2C3E50;
    border:1px solid #36424f;
    color:white;
}


.list-group > .list-group-item > a {
    text-decoration:none;
    color:white;
}

.list-group li:hover
{
    border-left:2px solid #1abc9c;
}

.badge
{
    background-color:#222f3d;
}

.well

{  
    border: 0px; 
    background-color:#222f3d;
}

.well_box{

 text-align:center;

}

 .sid
{
   font-size:44px;
   padding-left:10px;
   color:#2C3E50;
}

 .well span:hover
 {
     color:#1abc9c;
 }


.glyphicon.glyphicon-user {
    font-size: 68px;
    color:#2C3E50;

  
}
.glyphicon.glyphicon-user:hover{

    color:#1abc9c;
    z-index: 2;
    transition: all 300ms ease-in;
    transform: scale(1.5);
    /*-webkit-transition: all 300ms ease-in-out;
    -webkit-transform: scale(1.5);
    -ms-transition: all 300ms  ease-in-out;
    -ms-transform: scale(1.5);   
    -moz-transition: all 300ms  ease-in-out;
    -moz-transform: scale(1.5);*/

}

.glyphicon.glyphicon-filter {
     font-size: 68px;
     color:#2C3E50;
   
}
.glyphicon.glyphicon-filter:hover{
    color:#1abc9c;
    z-index: 2;
   ...

JavaScript

var app = angular.module("app", []);
app.controller('ctrl', function ($scope) {
    $scope.greetings = "Dashboard";
    $scope.taskList = {};
    $scope.taskList = {
        Open: { Label: "Open Assigned to me", "class": "label-info", Value: 5 },
        Overdue: { Label: "My Overdue Incidents", "class": "label-danger", Value: 1 },
        Solved: { Label: "My Solved Proposed Incidents", "class": "label-warning", Value: 2 },
        Closed: { Label: "My Closed Incidents", "class": "label-success", Value: 15 }
    };

});