JSFiddle - React, Tailwind, and code Playground

Bootstrap 3 Jquery Yakabox

by DugSohn

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sidr/2.2.1/jquery.sidr.min.js"></script>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/nd1mexyy0xevhv5/6fdc3a856a26e706a3edad566422a903.css?dl=0/6fdc3a856a26e706a3edad566422a903.css?yakabox-vne-5.21.4-1">
<script src="jquery.sidr.light.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.0.0/tinymce.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.js"></script>
<div class="ui-yakabox-iftty-email">
  <div class="row ui-yakabox-iftty-email-to">
    <div class="col-md-12">
      <div class="media">
      
        <div class="media-left">
          <span data-tooltip="Select contacts" aria-label="To - Select contacts" role="link" tabindex="1">To</span>
        </div>
        <div class="media-body">
          <ul class="list-group ui-yakabox-margin-0">
            <li class="list-group-item">Chris Chilcoat <span class="fa fa-close"></span></li>
            <li class="list-group-item">John Brown <span class="fa fa-close"></span></li>
            <li class="list-group-item">Doug Sohn <span class="fa fa-close"></span></li>
          </ul>
          <div class="form-group" id="multiple-datasets">
            <label class="sr-only" for="recepients">Find Recepients</label>
            <input type="email" class="form-control input-sm typeahead" id="recepients" placeholder="Type here to add recepients...">
          </div>
        </div>
        <div class="media-right">
          <span...

SCSS

.ui-yakabox-iftty-email {
  .row {
    border-bottom:1px solid #ccc;
    padding:10px;
    .tox-tinymce {
      border: none;
    }
    .tox-statusbar{
      display:none;
    }  
  }
  .ui-yakabox-iftty-email-to,
  .ui-yakabox-iftty-email-cc{ 
    .media, .media-body {
      overflow: visible;
    }
    .list-group {
      display:inline-block;
    }
    ul.list-group:after {
      clear: both;
      display: block;
      content: "";
    }
    .list-group-item {
      float: left;
      border-radius:3px;
      padding: 3px 5px 5px;
      margin: 0 3px 0 0;
    }
    .form-group {
      background:none;
      min-width:200px;
      max-width:400px;
      display:inline-block;
      padding:0;
      vertical-align:top;
      border:none;
    }
    .form-control {
      border:none;
      background:none;
      box-shadow:none;
    }
  }
  .ui-yakabox-iftty-email-subject {
    input {
      border:none;
      background:none;
      box-shadow:none;
      color:black;
    }
    input::placeholder {
      color:black;
    }
  }
}

.form-group {
  background:none;
}
.ui-yakabox-padding-0 {
  padding:0 !important;;
}
.ui-yakabox-margin-0 {
  margin:0 !important;;
}

JavaScript

$('.js-proto-button-open-cc').on('click', function(){
   $('.ui-yakabox-iftty-email-cc').show();
});




var nbaTeams = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

var nhlTeams = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

$('#recepients').typeahead({
  highlight: true
},
{
  name: 'nba-teams',
  display: 'team',
  source: nbaTeams,
  templates: {
    header: '<h3 class="league-name">NBA Teams</h3>'
  }
},
{
  name: 'nhl-teams',
  display: 'team',
  source: nhlTeams,
  templates: {
    header: '<h3 class="league-name">NHL Teams</h3>'
  }
});