JSFiddle - React, Tailwind, and code Playground

by artoodetoo

HTML

<html>
<head>
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">
<style>
  .calendar-table th, .calendar-table td { padding: 0 !important; }
</style>
</head>
<body>
<div class="container">
  
  <div class="page-header">
      <h1>Javascript example</h1>
      <p class="lead">Test Date Range Picker and  Bootstrap Select controls.</p>
  </div>

  <form method="get">
  <div class="row">

    <div class="col-md-4">
      <input class="form-control" type="text" id="daterange" name="daterange" value="" />
    </div>

    <div class="col-md-4"><select id="choice" name="choice[]" class="selectpicker form-control" multiple>
      <optgroup label="Condiments">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
      </optgroup>
      <optgroup label="Breads">
        <option>Plain</option>
        <option>Steamed</option>
        <option>Toasted</option>
      </optgroup>
    </select></div>

    <div class="col-md-4"><button type="submit" class="btn btn-default">Submit</button></div>

  </div>
  </form>
</div>

<script>

$(document).ready(function() {
  $('#daterange').daterangepicker();
  $('#choice').selectpicker();
});
</script>

</body>
</html>