JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.3.min.js"></script>
<div class="top clearfix"> 
<ul class="tabs">
                  <li class=""> <a class="tog"  data-href='#Chats-chat'>Chats</a> </li>
                  <li> <a class="tog"  data-href="#Leads">Leads</a> </li>
                  <li class="active"> <a class="tog"  data-href="#Visitors">Visitors</a> </li>
                </ul>
              </div>
           
            <div class="widget-contents clearfix">
              <div class="tab-content">
                <div id="Chats-chat" class="tab-pane">
                 <span id="line-example" class="morrischart"></span> 
                </div>
                <div id="Leads" class="tab-pane"> 
                 
                </div>
                <div id="Visitors" class="tab-pane active">
                  <span id="tot-chats" class="morrischart"></span>
                </div>
            </div>
          </div>

CSS

ul.tabs {
  list-style: none;
  padding-top: 5px;
  position: relative;
  top: 1px;
  overflow: hidden;
  margin: 0px;
}
ul.tabs li {
  float: left;
  margin-bottom: -1px;
  margin-right: 4px;
  background-color: rgba(0, 0, 0, 0);
  position: relative;
  /*z-index: 2;*/
}
ul.tabs li a {
  display: block;
  min-width: 90px;
  text-align: center;
  background-clip: padding-box;
  background-color: #dddddd;
  border: 1px solid #cdcdcd;
  border-radius: 3px 3px 0 0;
  color: rgba(55, 62, 74, 0.5);
  font-size: 12px;
  text-transform: uppercase;
  line-height: 1.42857;
  padding: 8px 10px;
  transition: background-color 1s ease;
  -moz-transition: background-color 1s ease;
  -o-transition: background-color 1s ease;
}
ul.tabs li:last-child {
  margin-right: 0px;
}
ul.tabs li.active a {
  color: #000;
  border-bottom: 1px solid #fff;
  transition: background-color 1s ease;
  -moz-transition: background-color 1s ease;
  -o-transition: background-color 1s ease;
  background-color: #fff;
}

.tab-content {
  position: relative;
  width: 100%;
}
.tab-content > .tab-pane {
  display: none;
}
.tab-content > .active {
  display: block;
}
/* Clearfix hack */
/* slightly enhanced, universal clearfix hack */
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.clearfix {
  display: inline-block;
}

/* start commented backslash hack \*/
* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}
.dp-tab {
  color: #7B7B7B;
  display: block;
  line-height: 39px;
}
.dp-tab:hover {
  color: #7B7B7B;
}

.widget-panel {
  width: 100%;
}
.widget-panel .header {
  border-bottom: 1px solid #cdcdcd;
  width: 100%;
  position: relative;
  /*z-index: 0;*/
}
.widget-panel .header ul.tabs {
  float: right;
}
.widget-panel .header ul.tabs li:after {
  clear: left;
}
.widget-panel .header .title{
  display: block;
  float: left;
  color: #777777;
  font-size: 16px;
  font-weight: 400;
  line-height: 38px;
  text-shadow:...

JavaScript

$(document).on('click','.tog',function(){
    
    // var toggle = $(this).attr('href');
     var toggle = $(this).data('href');
    $(this).closest('.tabs').find('li').removeClass('active');
    $(toggle).closest('.tab-content').find('div').removeClass('active');
    $(toggle).addClass('active');
    $(this).parent().addClass('active');    

    if(toggle=='#buy-credits'){
     $('#standard').addClass('pulse');
  }
});
Morris.Line({
  element: 'line-example',
  data: [
    { y: '2006', a: 100, b: 90 },
    { y: '2007', a: 75,  b: 65 },
    { y: '2008', a: 50,  b: 40 },
    { y: '2009', a: 75,  b: 65 },
    { y: '2010', a: 50,  b: 40 },
    { y: '2011', a: 75,  b: 65 },
    { y: '2012', a: 100, b: 90 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B']
});

Morris.Donut({
  element: 'tot-chats',
  data: [
    {label: "Download Sales", value: 12},
    {label: "In-Store Sales", value: 30},
    {label: "Mail-Order Sales", value: 20}
  ]
});