JSFiddle - React, Tailwind, and code Playground

Edit Can Edit Access

by Dug Sohn

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.css">
<script src="https://momentjs.com/downloads/moment.js"></script>
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/scss/themes/darkly/ui_dark.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<nav class="nav navbar-primary bg-primary">
  <div class="container-fluid">
    <div class="navbar-brand">
      <i class="fa fa-users fa-white"></i>&nbsp; [Team Name]
    </div>
    <ul class="nav navbar-nav">
      <li><a href="#">About</a>
      </li>
      <li><a href="#">Activity</a>
      </li>
      <li><a href="#" class="active">Setup</a></li>
    </ul>
    <div class="pull-right">
      <button class="btn btn-default navbar-btn">
        <i class="fa fa-bookmark"></i> Follow
      </button>
    </div>
  </div>
</nav>
<nav class="nav nav-gray">
  <ul class="nav navbar-nav">
    <li>
      <button class="btn navbar-btn btn-default">
        <i class="fa fa-check"></i> You're a Team Lead
        <i class="fa fa-chevron-down"></i> </button>
    </li>
    <li>
      <button class="btn navbar-btn btn-default">
        <i class="fa fa-remove"></i> Delete Team
      </button>
    </li>
  </ul>
</nav>
<div class="container">
  <div class="row">
    <div class="col-sm-12" data-desc="main">
      <div class="row">
        <div class="col-xs-2 col-sm-3 col-lg-2">
          <button class="btn btn-default pull-right">
           ...

CSS

@import url(//fonts.googleapis.com/css?family=Open+Sans:400,700,300);
  @import url(//fonts.googleapis.com/css?family=Oswald:400,700,300);
  * {
    font-family: 'Open Sans';
    color: gray;
  }
  
  .btn-autosave {
    /* The switch - the box around the slider */
    /* Hide default HTML checkbox */
    /* The slider */
    /* Rounded sliders */
  }
  
  .btn-autosave .btn-primary,
  .btn-link.btn-primary .fa,
  .btn-primary .visible-lg-inline {
    color: gray;
  }
  
  .btn-autosave *,
  .btn-autosave .btn:hover {
    text-decoration: none;
  }
  
  .btn-autosave button {
    background-color: transparent;
  }
  
  .btn-autosave nav {
    padding-top: 5px;
  }
  
  .btn-autosave .tooltip {
    white-space: no-wrap;
    width: 200px;
  }
  
  .btn-autosave .media-controls {
    margin-left: 20%;
  }
  
  .btn-autosave .switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 17px;
    vertical-align: text-top;
    margin-bottom: 0;
    margin-top: 4px;
  }
  
  .btn-autosave .switch input {
    display: none;
  }
  
  .btn-autosave .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .btn-autosave .slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 4px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .btn-autosave input:checked + .slider,
  .badge,
  .btn-block {
    background-color: #2196F3;
  }
  
  .btn-autosave input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  .btn-autosave input:checked + .slider:before {
    -webkit-transform: translateX(13px);
    -ms-transform: translateX(13px);
    transform: translateX(13px);
  }
  
  .btn-autosave .slider.round {
    border-radius: 17px;
  }
  
  .btn-autosave .slider.round:before {
    border-radius: 50%;
  }
  
 ...

JavaScript

$(document).ready(function() {
  $('#example').dataTable({
    "fixedHeader": {
      header: true,
      footer: false
    },
    "scrollY": "220px",
    "scrollCollapse": true,
    "paging": false,
  });
});

$('.dataTables_info').closest('.row').hide();

$('#ybx-show-moderation').change(function() {

  if ($('#ybx-show-moderation').is(':checked')) {
    $('#moderation-settings').slideDown();
    $(this).closest('.btn-autosave').find('.check').toggleClass('checked');
    $(this).closest('.btn-autosave').find('.check').html('On');

  } else {
    $('#moderation-settings').hide();
    $(this).closest('.btn-autosave').find('.check').toggleClass('checked');
    $(this).closest('.btn-autosave').find('.check').html('Off');

  }
});


$('#ybx-switch-default-access').change(function() {

  if ($('#ybx-switch-default-access').is(':checked')) {
    $('#access-settings').slideDown();
    $(this).closest('.btn-autosave').find('.check').toggleClass('checked');
    $(this).closest('.btn-autosave').find('.check').html('On');

  } else {
    $('#access-settings').hide();
    $(this).closest('.btn-autosave').find('.check').toggleClass('checked');
    $(this).closest('.btn-autosave').find('.check').html('Off');

  }
});

$('#ybx-switch-whocanedit-access').change(function() {

  if ($('#ybx-switch-whocanedit-access').is(':checked')) {
    $('#access-setters').show();
    $(this).closest('.btn-autosave').find('.check').toggleClass('checked');
    $(this).closest('.btn-autosave').find('.check').html('On');

  } else {
    $('#access-setters').hide();
    $(this).closest('.btn-autosave').find('.check').toggleClass('checked');
    $(this).closest('.btn-autosave').find('.check').html('Off');

  }
});

! function(source) {

  var $myTextarea = $('.list-unstyled list-inline');

  $('.ui-autocomplete-input').typeahead({
    source: source,
    updater: function(item) {
      $myTextarea.append(item, ' ');
      return '';
    }
  });



}(["Alabama", "Alaska", "Arizona", "Arkansas",...