JSFiddle - React, Tailwind, and code Playground

by KARTHIKEYAN K

HTML

<body>
    <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>
                    <li><a href="#">Manage</a></li>
                    <li><a href="#">Reports</a></li>
                    <li><a href="#">Admin</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">Dashboard</p>
                    </div>
              ...

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 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;
    transition: all 300ms ease-in;
    transform:...

JavaScript

var canvas = document.getElementById('myChart');
var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 2,
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: [65, 59, 20, 81, 56, 55, 40],
        }
    ]
};
var option = {
    scales: {
        yAxes: [{
            stacked: true,
            gridLines: {
                display: true,
                color: "rgba(255,99,132,0.2)"
            }
        }],
        xAxes: [{
            gridLines: {
                display: false
            }
        }]
    }
};

var myBarChart = Chart.Bar(canvas, {
    data: data,
    options: option
});



var canvas = document.getElementById('myChart2');
var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 5,
            pointHitRadius: 10,
            data: [65, 59, 80, 0, 56, 55, 40],
        }
    ]
};

var option = {
    showLines: true
};
var myLineChart = Chart.Line(canvas, {
    data: data,
    options: option
});

function adddata() {
   ...