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://code.jquery.com/jquery-2.2.4.min.js"></script>
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.js"></script>
<div class="container-fluid mini-nav">
  <br>
  <h4>
   Browsers support in copy 
  </h4>

  <nav class="navbar navbar-default">
    <div class="container-fluid ">
      <div class="row">
        <div class="col-xs-10 col-sm-10 col-md-11">
          <ul class="nav navbar-nav navbar-left">
            <li>
              <button class="btn btn-link" type="button"><i class="fa fa-arrow-left fa-none" title="Restore Default"></i></button>
            </li>
            <li>
              <button class="btn btn-link" type="button"> <i class="fa fa-refresh" title="Refresh Data"></i></button>
            </li>
            <li class="hidden-xs col-sm-3 col-md-4 col-lg-5 ">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Search for..." value=""><span class="input-group-btn"><button class="btn btn-default " title=""><i class="fa fa-search" title="Search Grid"></i><span class="hidden-sm hidden-xs"></span></button>
                </span>
              </div>
            </li>
            <li class="visible-xs ">
              <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#searchBox" aria-expanded="false" aria-controls="searchBox">
                <i class="fa fa-search" title="Search Grid"></i></button>

            </li>
   ...

CSS

body {}

.btn-autosave {
  /* The switch - the box around the slider */
  /* Hide default HTML checkbox */
  /* The slider */
  /* Rounded sliders */
}
#CopiedtoClipboard, #CopiedtoClipboard3 {
      position: absolute;
    width: 150px;
    LEFT: -50PX;
    FONT-SIZE: 11Px;
    padding: 5px 10px;
    text-align: center;
    box-shadow: 2px 2px 3px #ddd;
}

#CopiedtoClipboard2 {

      position: absolute;
    width: 225px;
    LEFT: -55PX;
    FONT-SIZE: 11Px;
    padding: 5px 10px;
    text-align: center;
    box-shadow: 2px 2px 3px #ddd;
}

.navbar-header {
  margin-left: -15px !important;
}

.btn-autosave .btn-primary, .btn-link.btn-primary .fa, .btn-primary .visible-lg-inline {
  color: rgb(0, 154, 244);
}

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

JavaScript

$('#copyLinktoClipboard').on('click', function() {

  var aux = document.createElement("input");

  // Get the text from the element passed into the input
  aux.setAttribute("value", "https://linktoshare.sjhahahjsjjs.sjhskjah");

  // Append the aux input to the body
  document.body.appendChild(aux);

  // Highlight the content
  aux.select();

  // Execute the copy command
  document.execCommand("copy");
  
  $("#CopiedtoClipboard").show().delay(2000).fadeOut();

  // Remove the input from the body
  document.body.removeChild(aux);

});



$('#copyLinktoClipboard2').on('click', function() {
  
 
  $("#CopiedtoClipboard2").show();
  $('#copythis').focus().select();
  
  $('#copyButton').on('click', function() {  
  	document.execCommand("copy");
    $("#CopiedtoClipboard2").hide();
 	 $("#CopiedtoClipboard3").show().delay(2000).fadeOut();

  });

$(document).on("keydown", function(e){
    if (e.keyCode == 67 && (e.ctrlKey || e.metaKey)){
    $("#CopiedtoClipboard2").hide();
    $("#CopiedtoClipboard3").show().delay(2000).fadeOut();

}
});


  // Remove the input from the body

});