JSFiddle - React, Tailwind, and code Playground

by Luke Marlow

HTML

<div x-data="Components.customSelect({ open: true, value: 3, selected: 3 })" x-init="init()">
  <label id="listbox-label" class="block text-sm font-medium text-gray-700">
    Assigned to
  </label>
  <div class="mt-1 relative">
    <button type="button" x-ref="button" @keydown.arrow-up.stop.prevent="onButtonClick()" @keydown.arrow-down.stop.prevent="onButtonClick()" @click="onButtonClick()" aria-haspopup="listbox" :aria-expanded="open" aria-expanded="true" aria-labelledby="listbox-label" class="relative w-full bg-white border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
      <div class="flex items-center">
        <span aria-label="Online" :aria-label="[true,false,false,true,false,true,true,false,true,false][value] ? 'Online' : 'Offline'" :class="{ 'bg-green-400': [true,false,false,true,false,true,true,false,true,false][value], 'bg-gray-200': !([true,false,false,true,false,true,true,false,true,false][value])}" class="bg-green-400 flex-shrink-0 inline-block h-2 w-2 rounded-full"></span>
        <span x-text="[&quot;Wade Cooper&quot;,&quot;Arlene Mccoy&quot;,&quot;Devon Webb&quot;,&quot;Tom Cook&quot;,&quot;Tanya Fox&quot;,&quot;Hellen Schmidt&quot;,&quot;Caroline Schultz&quot;,&quot;Mason Heaney&quot;,&quot;Claudie Smitham&quot;,&quot;Emil Schaefer&quot;][value]" class="ml-3 block truncate">Tom Cook</span>
      </div>
      <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
        <svg class="h-5 w-5 text-gray-400" x-description="Heroicon name: solid/selector" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0...