Button Groups

<div class="inline-flex text-gray-800">
  <!-- active -->
  <button class="px-4 py-1 border-2 rounded-l border-indigo-400 focus:outline-none hover:bg-gray-900 bg-indigo-400 hover:bg-indigo-400 text-white">Left</button>

  <button class="px-4 py-1 border-2 rounded-r border-indigo-400 focus:outline-none hover:bg-indigo-100">Right</button>
</div>

<div class="bg-gray-200 text-sm py-1 px-1 rounded select-none text-gray-700 inline-block">
  <button class="rounded px-2 py-1 hover:bg-white hover:shadow focus:outline-none">Left</button>

  <!-- active -->
  <button class="rounded px-2 py-1 bg-white shadow font-medium focus:outline-none">Middle</button>

  <button class="rounded px-2 py-1 hover:bg-white hover:shadow focus:outline-none">Right</button>
</div>