<style type="text/tailwindcss">
@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .scrollbar::-webkit-scrollbar {
      display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .scrollbar {
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
  }
}
@layer components {
  body {
    @apply bg-slate-800;
  }
  .sidebar-icon {
    @apply relative flex items-center justify-center h-12 w-12 my-2 bg-gray-800 text-white hover:bg-sky-600 hover:text-white rounded-3xl hover:rounded-lg transition-all duration-300 ease-linear text-xl cursor-pointer;
  }
  .sidebar-tooltip {
    @apply absolute w-auto p-2 ml-2 min-w-max left-14 rounded-md shadow-md text-white bg-gray-900 text-xs font-bold transition-all duration-100 scale-0 origin-left;
  }
  .custom-theme {
    @apply text-black font-normal bg-white shadow-md rounded-none text-xs px-3 py-3 -mt-1;
  }
  .custom-theme .tippy-arrow {
    @apply !border-r-white;
  }
}

</style>

<div class="flex">
  <div class="fixed items-center top-0 left-0 h-screen w-auto m-0 flex flex-col bg-gray-900 text-white shadow-lg h-full px-2">
    <ul class="scrollbar overflow-y-scroll">
      <li class="sidebar-icon" title="Test 1">
        <i class="fas fa-car"></i>
      </li>
      <li class="sidebar-icon" title="Test 2">
        <i class="fas fa-car"></i>
      </li>
      <li class="sidebar-icon" title="Test 3">
        <i class="fas fa-car"></i>
      </li>
      <li class="sidebar-icon" title="Test 4">
        <i class="fas fa-car"></i>
      </li>
      <li class="sidebar-icon" title="Test 5">
        <i class="fas fa-car"></i>
      </li>
      <li class="sidebar-icon" title="Test 6">
        <i class="fas fa-car"></i>
      </li>
      <li class="sidebar-icon" title="Test 7">
        <i class="fas fa-car"></i>
      </li>
      <li class="sidebar-icon" title="Test 8">
        <i class="fas fa-car"></i>
      </li>
      <li class="sidebar-icon" title="Test 9">
        <i class="fas fa-car"></i>
      </li>
      <li class="sidebar-icon" title="Test 10">
        <i class="fas fa-car"></i>
      </li>
      <li class="sidebar-icon" title="Test 11">
        <i class="fas fa-car"></i>
      </li>
      <li class="sidebar-icon" title="Test 12">
        <i class="fas fa-car"></i>
      </li>
    </ul>
  </div>
</div>

tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: '#202225',
        secondary: '#5865f2',
        gray: {
          900: '#202225',
          800: '#2f3136',
          700: '#36393f',
          600: '#4f545c',
          400: '#d4d7dc',
          300: '#e3e5e8',
          200: '#ebedef',
          100: '#f2f3f5',
        },
        clifford: "#da373d"
      }
    }
  }
};

const list = [...document.querySelectorAll('li')]
const length = $('ul > li').length;
for (let i = 0; i < length; i++) {
  tippy(list[i], {
    placement: 'right',
    interactive: true,
    arrow: true,
    appendTo: list[i].parentNode,
    theme: 'custom',
    popperOptions: {
      modifiers: {
        preventOverflow: { enabled: false },
        hide: { enabled: false }
      }
    }
  })
}