JSFiddle - React, Tailwind, and code Playground

new bootstrap

by DugSohn

HTML

<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<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-expand-sm navbar-dark bg-dark navbar-fixed-top no-border-radius" id="main_navbar" role="navigation">
    <div class="container-fluid">
      <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 class="navbar-header">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button> </div>
      <div class="collapse navbar-collapse" id="navbar-collapse-1">
        <ul class="navbar-nav bd-navbar-nav flex-row">
          <li class="ui-yakabox-globalnav-search-lg navbar-form-expanded navbar-form navbar-left d-xs-none" 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">
                    <button type="button" class="btn btn-default btn-sm dropdown-toggle as-is bs-dropdown-to-select ybx-searchBox-input"...

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();


});