JSFiddle - React, Tailwind, and code Playground

stats

by Meredith Crow

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/custom/css/cache/137de011e0fc2440ce11c99272733d49.css?yakabox-vne-5.17.8-1">
<body class="ui-app ui-global-nav ui-app-inverse ui-app-dash  ui-workflow-manager" ui-app-id="39" role="application">
  <nav class="navbar navbar-inverse navbar-fixed-top no-border-radius" id="main_navbar" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button>
        <a class="navbar-brand" href="/activityViewer"><img src="https://yakabod.yakabox.com/images/yakaboxHeaderLogo.png" class="img-responsive"> <span class="bold text-white">Yakabod</span></a> </div>
      <div class="collapse navbar-collapse" id="navbar-collapse-1">
        <ul class="nav navbar-nav navbar-left">
          <li class="ui-yakabox-globalnav-search-lg navbar-form-expanded navbar-form navbar-left visible-lg-block visible-md-block visible-xs-block" role="search">
            <div class="ui-yakabox-searchBox  ui-helper-clearfix">
              <form onsubmit="return false;">
                <div class="input-group  bias-input-group" style="padding-top:3px;">
                  <input class="ybx-searchBox-text form-control input-sm" placeholder="Enter Keywords">
                  <div class="ybx-searchBox-wrapper input-group-btn bs-dropdown-to-select-group">
                 ...

SCSS

.well { border-radius:0; 
        border:0; 
        background-color:#fff;
        box-shadow:none;
        
        
        h2 {
             margin-top:5px; 
         
        } 
        .well { border-radius:0; 
        border:0; 
        border-top:0px solid #fff; 
        background-color:#fff;
        
   
        }
        
             h2 {
             margin-top:5px; 
             font-size:30px;
         
        } 
        
               thead th.sortable {
          padding: 25px 15px;
          background-color:#ececec;
          font-weight:400;
          font-size:10px;
          text-transform:uppercase;
          border:none;
        }
        
        .table-striped {
          
          td { padding: 10px 10px;}
          
          
           >tbody>tr>td, >thead>tr>th {
            text-align:right;
          }
          >tbody>tr>td:first-child,           >thead>tr>th:first-child {
            text-align:left;
          }
          
        }
        .icon {
          height:16px;
          margin-right:10px;
          
        }
        .fa {
          color: #ccc
        }
        .fa:hover {
    color: #05a5d1;
        }
}


.notes {
  padding:20px;
 }
 
 #smallicons > div {
   display:inline-block;
   margin-right:10px;
 }
 
   #smallicons > div > div {
  display:table;
  border-radius:20px;
  height:40px;
  width:40px;
  cursor:pointer;
}
 #smallicons span {
  display:table-cell;
  text-align:center;
  font-size:10px;
  vertical-align:middle
}

JavaScript

$('#daterangepicker').click(function() {
  event.preventDefault();
  alert('show daterangeicker to left in dropdown')
});

$('#daypicker').click(function() {
  event.preventDefault();
  alert('show single day picker to left in drop down')
});


$('.zoom_page_info_panel').click(function() {

  $('#ybx-panel').toggle('slow');

});

$('.ui-yakabox-panel-trigger').click(function() {

  $('#ybx-panel').toggle('slow');

});

$('#smallicons > div > div').click(function () {
alert('show name with link');
});


$('.show_hide_clicker').click( function () {

 var $thisTR = $(this).closest('tr'),
   $nextTR = $thisTR.next();
   
   $thisTR.find('.fa').toggleClass('fa-chevron-down','fa-chevron-right')
   $nextTR.toggle();
   

});