JSFiddle - React, Tailwind, and code Playground

by fulviocanducci

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/select2-bootstrap-5-theme.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<div class="form-group form-group-sm p-4">
<select type="text" id="sel" class="form-select form-select-sm">
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  <option value="4">Test 4</option>
  <option value="5">Test 5</option>
</select>
</div>
<div class="col-md-12 mb-2 p-4">
  <label class="control-label" for="ClientId">Cliente</label>
  <div class="input-group input-group-sm">
    <select id="sel1" class="form-select form-select-sm">
      <option value="1">Test 1</option>
      <option value="2">Test 2</option>
      <option value="3">Test 3</option>
      <option value="4">Test 4</option>
      <option value="5">Test 5</option>
    </select>
    <button class="btn btn-success btn-sm" type="button" data-bs-toggle="modal" 
            data-bs-target="#modalClient">
      <i class="bi bi-person"></i> Busca
    </button>        
  </div>
</div>

JavaScript

$(function() {
	$("#sel").select2({
  	theme: 'bootstrap-5',
    selectionCssClass: "select2--small",
    dropdownCssClass: "select2--small",
  });
  $("#sel1").select2({
  	theme: 'bootstrap-5',
    selectionCssClass: "select2--small",
    dropdownCssClass: "select2--small",
  });
})