button groups

              <span class="inline-flex isolate">
  <button
    class="flex items-center justify-center focus:z-10 transition-all duration-300 focus:ring-2 focus:ring-offset-1 focus:outline-none text-zinc-500 bg-white hover:text-blue-500 ring-1 ring-zinc-200 focus:ring-blue-500 focus:ring-offset-white h-10 px-6 py-3 text-base font-medium rounded-l-md rounded-l-md rounded-l-lg rounded-l-lg rounded-l-lg rounded-l-lg"
  >
    Left
  </button>
  <button
    class="flex items-center justify-center focus:z-10 transition-all duration-300 focus:ring-2 focus:ring-offset-1 focus:outline-none text-zinc-500 bg-white hover:text-blue-500 ring-1 ring-zinc-200 focus:ring-blue-500 focus:ring-offset-white h-10 px-6 py-3 text-base font-medium rounded-none -ml-px rounded-none -ml-px rounded-none -ml-px rounded-none -ml-px rounded-none -ml-px rounded-none -ml-px"
  >
    Center
  </button>
  <button
    class="flex items-center justify-center focus:z-10 transition-all duration-300 focus:ring-2 focus:ring-offset-1 focus:outline-none text-zinc-500 bg-white hover:text-blue-500 ring-1 ring-zinc-200 focus:ring-blue-500 focus:ring-offset-white h-10 px-6 py-3 text-base font-medium rounded-r-md -ml-px rounded-r-lg -ml-px rounded-r-md -ml-px rounded-r-lg -ml-px rounded-r-lg -ml-px rounded-r-lg -ml-px"
  >
    right
  </button>
</span>