JSFiddle - React, Tailwind, and code Playground

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">
<div class="container">
  <div class="row">

    <div class="col-xs-11">
      <h3 class="check">
   <div class="btn-autosave">
      <div class="btn btn-link btn-primary">
        <label class="switch">
          <input type="checkbox" id="ybx-switch-default-access"  title="autosaved">
          <span class="slider round"></span>
        </label>
        <span class=check> On</span>
      </div>
Custom Access Setting for New Content
</div></h3>
    </div>

    <div class="row" id="access-settings" style="display:none">


      <div class="col-xs-8 col-xs-offset-2">

        <div class="form-horizontal" style="">
          <div>
            <div class="row">
              <div class="col-md-12">
                <div role="tabpanel" class="tab-pane active" id="profile">
                  <div class="form-horizontal">
                    <h3 class="tab-pane-header">Classifications</h3>
                    <div class="tab-pane-content">
                      <div class="form-group clearfix ">
                        <div class="col-md-12"><span><ul id="" class="list-unstyled list-inline"><li><div class="ui-widget-content ui-state-active ui-corner-all " style="padding: 2px 5px; border: none;"><a target="_blank" class="ui-yakabox-link urn ybx-reason-urn ybx-ContentProfile">Yakabod Proprietary</a><i class="fa fa-remove"></i></div></li></ul><div class="input-group"><span...

CSS

.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;
}

.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%;
}

.ui-yakabox-link, .ui-yakabox-icon-link  {
  padding: 10px 15px;
  background-color:aliceblue;
  border-radius:10px;
}
.ui-yakabox-icon-link {
  padding: 10px 15px 10px 30px;
  background-repeat: no-repeat;
  background-position: center left;
}

h3,
h4 {
  font-weight: 400;
  color: gray
}

.checked, a, a:link {
  color: rgb(0, 154, 244);
  text-decoration:none
}

JavaScript

$('#ybx-switch-default-access').change(function() {
  if ($('#ybx-switch-default-access').is(':checked')) {
    $('#access-settings').show();
    $(this).closest('.col-xs-11').find('.check').toggleClass('checked')
  } else {
    $('#access-settings').hide();
    $(this).closest('.col-xs-11').find('.check').toggleClass('checked')

  }
});

$('#ybx-switch-whocanedit-access').change(function() {
  if ($('#ybx-switch-default-access').is(':checked')) {
    $('#access-setters').show();
    $(this).closest('.col-xs-11').find('.check').toggleClass('checked')
  } else {
    $('#access-setters').hide();
    $(this).closest('.col-xs-11').find('.check').toggleClass('checked')

  }
});