JSFiddle - React, Tailwind, and code Playground

by KARTHIKEYAN K

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <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="#">Users</a></li>
                    <li><a href="#">Tasks</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Sign Up</a></li>
                    <li><a href="#">Login</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
    <div class="col-lg-3">
        <div class="panel panel-default">
            <div class="panel-heading">
                <p class="panel-title">Dashboard</p>
            </div>
            <div class="panel-body">
                <ul class="list-group">
                    <li class="list-group-item">New <span class="badge">12</span></li>
                    <li class="list-group-item">Closed <span class="badge">5</span></li>
                    <li class="list-group-item">Overdue<span class="badge">3</span></li>
                    
                </ul>
            </div>
        </div>
    </div>
        <div class="col-lg-3">
            <div class="panel panel-default">
...

CSS

body {
    background-color:#2C3E50;
}

.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-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 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;
}


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

    color:#1abc9c;
}

.glyphicon.glyphicon-list-alt {
    font-size: 68px;
    color:#2C3E50;
   
}
.glyphicon.glyphicon-list-alt:hover{

    color:#1abc9c;
}

.navbar-default .navbar-brand {
  color: #ecf0f1;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #ecdbff;
}
.navbar-default .navbar-text {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #ecdbff;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #ecdbff;
  background-color: #37b39a;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #ecdbff;
  background-color:...