JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<div data-am-filter>
  <div data-am-grid="space-between cols-4" class="dropdown-filter">
    <div class="grid-item">
      <div class="dropdown-filter-type">Company</div>
      <div data-am-dropdown="wide checkbox smaller-height" class="js-dropdown">
        <input type="hidden" name="selected-value" class="selected-value-hidden">
        <!-- <div class="dropdown-hint">Choose your character</div> -->
        <div class="dropdown-hint">
          <input type="text" placeholder="Choose..." class="dropdown__hint-input js-dropdown-input">

          <button type="button" class="dropdown__input-clear js-dropdown-input-clear">
						<svg aria-hidden="true">
							<use xlink:href="/assets/toolkit/icons/sprite.svg#svg--cross"></use>
						</svg>
						</span>
				</div>
				<ul class="dropdown-menu dropdown-menu-checkbox">
					<li class="item" data-search-value="Iceland">
						<div data-am-checkbox="checkbox">
							<input type="checkbox" id="dropdown-1" value="1">
							<label for="dropdown-1">
								Iceland
							</label>
						</div>
					</li>
					<li class="item" data-search-value="Sweden">
						<div data-am-checkbox="checkbox">
							<input type="checkbox" id="dropdown-2" value="2">
							<label for="dropdown-2">
								Sweden
							</label>
						</div>
					</li>
					<li class="item" data-search-value="Serbia">
						<div data-am-checkbox="checkbox">
							<input type="checkbox" id="dropdown-3" value="3">
							<label for="dropdown-3">
								Serbia
							</label>
						</div>
					</li>
					<li class="item" data-search-value="France">
						<div data-am-checkbox="checkbox">
							<input type="checkbox" id="dropdown-4" value="4">
							<label for="dropdown-4">
								France
							</label>
						</div>
					</li>
					<li class="item" data-search-value="Italy">
						<div data-am-checkbox="checkbox">
							<input type="checkbox" id="dropdown-5" value="5">
							<label...