JSFiddle - React, Tailwind, and code Playground

by Vasil Svetoslavov

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Add Codes <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="javascript:void()">10</a></li>
      <li><a href="javascript:void()">30</a></li>
      <li><a href="javascript:void()">100</a></li>
      <li role="separator" class="divider"></li>
      <li>
        <div class="form-inline">
          <div class="form-group">
            <input type="text" class="form-control" style="width: 5em;">
            <button class="btn btn-link">Go</button>
          </div>
        </div>
      </li>

      <li>
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-addon">Add</div>
            <input id="inpNumberCodes" type="text" placeholder="10" class="form-control min-50-perc"/>
            <div class="input-group-addon">code(s)</div>
            <div class="input-group-btn"><button class="btn btn-success" type="button" id="btnGo" onclick="btnGoClick();">Go!</button></div>
          </div>
        </div>
      </li>

    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"...

CSS

.min-50-perc {
  min-width: 5em;
}
.form-group {
  margin: 0px 4px !important;
}

.add-codes-inline {
  white-space: nowrap;
}

.form-inline .form-control {
  display: inline-block !important;
}
.menu-form {
  padding: 3px 20px;
}

JavaScript

function addCodes(numberOfCodes) {
  if (!numberOfCodes) {
    return;
  }
  $('#log').append("<p>Added " + numberOfCodes + " code" + (numberOfCodes > 1 ? 's' : ''));
}

function btnGoClick() {
  let n = $('#inpNumberCodes').val();
  addCodes(n);
  $('#inpNumberCodes').val('');
}