JSFiddle - React, Tailwind, and code Playground

by cheack

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tom-select/2.3.1/js/tom-select.complete.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tom-select/2.3.1/css/tom-select.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<form>
<div class="row m-4">
  <div class="col">
    <input type="text" name="firstname" placeholder="First Name" class="form-control mb-3"/>
    <input type="text" name="lastname" placeholder="Last Name" class="form-control mb-3"/>
    <input type="text" name="city" placeholder="City" class="form-control mb-3"/>
  </div>
  <div class="col">
    <select id="country" name="country" placeholder="Pick a country..."></select>
  </div>
</div>
</form>

JavaScript

$(() => {
  new TomSelect('#country', {
    valueField: 'id',
    labelField: 'title',
    searchField: 'title',
    options: [{
        id: 1,
        title: 'United States',
      },
      {
        id: 2,
        title: 'Canada',
      },
      {
        id: 3,
        title: 'France',
      },
      {
        id: 4,
        title: 'Germany',
      }
    ],
    create: false
  });

});