JSFiddle - React, Tailwind, and code Playground

Dash Drop Down Edit title

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">
<br/>
<br/>
<div class="container-fluid">
<div class="col-md-8" role="toolbar" aria-label="...">
  <div class="btn-group " role="group" aria-label="...">
    <button id="video-play-pause-button-5a720a433f513" class="btn btn-sm btn-link" title="Play"><i class="fa fa-play"></i></button>

    <div class="btn-group" role="group" aria-label="...">
      <div class="input-group ">
        <input type="range" id="video-seek-bar-5a720a433f513" class="video-seek-bar" value="0" title="Seek">
      </div>
    </div>
        <div class="input-group">
    
    <small id="video-time-counter-5a720a433f513" class="video-time-counter btn-group">00:00 / 03:01</small>
</div>
</div>

  </div>
<div class="col-md-4">
  <div class="btn-group" role="group" aria-label="...">
    <button id="video-skip-forward-5a720a433f513" class="btn btn-sm btn-link" title="Skip Forward" style="display:none;"><i class="fa fa-forward"></i></button>
    <button id="video-mute-button-5a720a433f513" class="btn btn-sm btn-link" title="Mute"><i class="fa fa-volume-up"></i></button>

    <div class="input-group">
      <input type="range"...

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