JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/tail.select-full.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/default/tail.select-light.css">
<p>Default.</p>
<p>
  <select class="select-1" data-placeholder="Select a Developer">
    <option value="activision" data-description="573 Games">Activion</option>
    <option value="bethesda" data-description="101 Games">Bethesda</option>
    <option value="bioware" data-description="29 Games">BioWare</option>
    <option value="cd-project" data-description="8 Games">CD Project Red</option>
    <option value="deep-silver" data-description="120 Games">Deep Silver</option>
    <option value="ubisoft" data-description="504 Games">Ubisoft</option>
  </select>
</p>
<p>Search</p>
<p>
  <select class="select-2" data-placeholder="Select a Developer">
    <option value="activision" data-description="573 Games">Activion</option>
    <option value="bethesda" data-description="101 Games">Bethesda</option>
    <option value="bioware" data-description="29 Games" selected>BioWare</option>
    <option value="cd-project" data-description="8 Games">CD Project Red</option>
    <option value="deep-silver" data-description="120 Games">Deep Silver</option>
    <option value="ubisoft" data-description="504 Games">Ubisoft</option>
  </select>
</p>

<p>Large multiple</p>
<p>
<select class="select-3" multiple>
  <option value="AL" data-description="Alabama">Alabama</option>
  <option value="AK" data-description="Alaska">Alaska</option>
  <option value="AZ" data-description="Arizona">Arizona</option>
  <option value="AR" data-description="Arkansas">Arkansas</option>
  <option value="CA" data-description="California">California</option>
  <option value="CO" data-description="Colorado">Colorado</option>
  <option value="CT" data-description="Connecticut">Connecticut</option>
  <option value="DE" data-description="Delaware">Delaware</option>
  <option value="FL"...

CSS

@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');

.tail-select{
  font-family:Oswald;
}

JavaScript

tail.select(document.querySelector('.select-1'), {
  deselect: true,
});

tail.select(document.querySelector('.select-2'), {
  deselect: true,
  search: true,
});
tail.select(document.querySelector('.select-2'), {
  deselect: true,
  search: true,
  multiple: true,
})