Button group

<div class="@container">
  <ul class="flex flex-col @mobile-lg:flex-row gap-2">
    <li class="flex">
      <button type="button" class="grow rounded font-bold leading-none text-blue-60v px-5 py-3 bg-transparent ring-inset ring-2 ring-blue-60v hover:ring-blue-warm-70v hover:text-blue-warm-70v active:ring-blue-warm-80v active:text-blue-warm-80v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
    </li>
    <li class="flex">
      <button type="button" class="grow rounded font-bold leading-none text-white px-5 py-3 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
    </li>
  </ul>
</div>

<div
  class="space-y-8">
  {# Blue #}
  <div class="space-y-4">
    <ul class="@container flex">
      {% for i in 0..2 %}
        <li class="flex grow @tablet:grow-0 group">
          <button type="button" class="grow group-first:rounded-s group-first:border-s-0 group-last:rounded-e group-last:border-e-0 group-[&:not(:first-child)]:-ms-px border-x border-blue-warm-70v active:border-s-blue-warm-80v font-bold leading-none text-white focus:z-10 px-5 py-3 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
        </li>
      {% endfor %}
    </ul>

    {# Large #}
    <ul class="@container flex">
      {% for i in 0..2 %}
        <li class="flex grow @tablet:grow-0 group">
          <button type="button" class="grow group-first:rounded-s group-first:border-s-0 group-last:rounded-e group-last:border-e-0 group-[&:not(:first-child)]:-ms-px border-x border-blue-warm-70v active:border-s-blue-warm-80v font-bold leading-none text-white focus:z-10 text-xl px-6 py-4 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
        </li>
      {% endfor %}
    </ul>
  </div>

  {# Red #}
  <div class="space-y-4">
    <ul class="@container flex">
      {% for i in 0..2 %}
        <li class="flex grow @tablet:grow-0 group">
          <button type="button" class="grow group-first:rounded-s group-first:border-s-0 group-last:rounded-e group-last:border-e-0 group-[&:not(:first-child)]:-ms-px border-x border-red-60v active:border-s-red-70v font-bold leading-none text-white focus:z-10 px-5 py-3 bg-red-50 hover:bg-red-60v active:bg-red-70v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
        </li>
      {% endfor %}
    </ul>

    {# Large #}
    <ul class="@container flex">
      {% for i in 0..2 %}
        <li class="flex grow @tablet:grow-0 group">
          <button type="button" class="grow group-first:rounded-s group-first:border-s-0 group-last:rounded-e group-last:border-e-0 group-[&:not(:first-child)]:-ms-px border-x border-red-60v active:border-s-red-70v font-bold leading-none text-white focus:z-10 text-xl px-6 py-4 bg-red-50 hover:bg-red-60v active:bg-red-70v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
        </li>
      {% endfor %}
    </ul>
  </div>

  {# Cyan #}
  <div class="space-y-4">
    <ul class="@container flex">
      {% for i in 0..2 %}
        <li class="flex grow @tablet:grow-0 group">
          <button type="button" class="grow group-first:rounded-s group-first:border-s-0 group-last:rounded-e group-last:border-e-0 group-[&:not(:first-child)]:-ms-px border-x border-blue-cool-40v active:border-blue-cool-60v font-bold leading-none text-gray-90 focus:z-10 px-5 py-3 bg-cyan-30v hover:bg-blue-cool-40v active:bg-blue-cool-60v active:text-white focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
        </li>
      {% endfor %}
    </ul>

    {# Large #}
    <ul class="@container flex">
      {% for i in 0..2 %}
        <li class="flex grow @tablet:grow-0 group">
          <button type="button" class="grow group-first:rounded-s group-first:border-s-0 group-last:rounded-e group-last:border-e-0 group-[&:not(:first-child)]:-ms-px border-x border-blue-cool-40v active:border-blue-cool-60v font-bold leading-none text-gray-90 focus:z-10 text-xl px-6 py-4 bg-cyan-30v hover:bg-blue-cool-40v active:bg-blue-cool-60v active:text-white focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
        </li>
      {% endfor %}
    </ul>
  </div>

  {# Orange #}
  <div class="space-y-4">
    <ul class="@container flex">
      {% for i in 0..2 %}
        <li class="flex grow @tablet:grow-0 group">
          <button type="button" class="grow group-first:rounded-s group-first:border-s-0 group-last:rounded-e group-last:border-e-0 group-[&:not(:first-child)]:-ms-px border-x border-orange-50v active:border-orange-60 font-bold leading-none text-gray-90 focus:z-10 px-5 py-3 bg-orange-30v hover:bg-orange-50v hover:text-white active:bg-orange-60 active:text-white focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
        </li>
      {% endfor %}
    </ul>

    {# Large #}
    <ul class="@container flex">
      {% for i in 0..2 %}
        <li class="flex grow @tablet:grow-0 group">
          <button type="button" class="grow group-first:rounded-s group-first:border-s-0 group-last:rounded-e group-last:border-e-0 group-[&:not(:first-child)]:-ms-px border-x border-orange-50v active:border-orange-60 font-bold leading-none text-gray-90 focus:z-10 text-xl px-6 py-4 bg-orange-30v hover:bg-orange-50v hover:text-white active:bg-orange-60 active:text-white focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
        </li>
      {% endfor %}
    </ul>
  </div>

  {# Gray #}
  <div class="space-y-4">
    <ul class="@container flex">
      {% for i in 0..2 %}
        <li class="flex grow @tablet:grow-0 group">
          <button type="button" class="grow group-first:rounded-s group-first:border-s-0 group-last:rounded-e group-last:border-e-0 group-[&:not(:first-child)]:-ms-px border-x border-gray-60 active:border-gray-80 font-bold leading-none text-white focus:z-10 px-5 py-3 bg-gray-50 hover:bg-gray-60 active:bg-gray-80 focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
        </li>
      {% endfor %}
    </ul>

    {# Large #}
    <ul class="@container flex">
      {% for i in 0..2 %}
        <li class="flex grow @tablet:grow-0 group">
          <button type="button" class="grow group-first:rounded-s group-first:border-s-0 group-last:rounded-e group-last:border-e-0 group-[&:not(:first-child)]:-ms-px border-x border-gray-60 active:border-gray-80 font-bold leading-none text-white focus:z-10 text-xl px-6 py-4 bg-gray-50 hover:bg-gray-60 active:bg-gray-80 focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
        </li>
      {% endfor %}
    </ul>
  </div>

  {# Outline Blue #}
  <div class="space-y-4">
    <ul class="@container flex">
      {% for i in 0..2 %}
        <li class="flex grow @tablet:grow-0 group">
          <button type="button" class="grow group-first:rounded-s group-first:border-s-0 group-last:rounded-e group-last:border-e-0 group-[&:not(:first-child)]:-ms-0.5 font-bold leading-none text-blue-60v hover:z-10 focus:z-10 px-5 py-3 ring-inset ring-2 ring-blue-60v hover:ring-blue-warm-70v hover:text-blue-warm-70v active:ring-blue-warm-80v active:text-blue-warm-80v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
        </li>
      {% endfor %}
    </ul>

    {# Large #}
    <ul class="@container flex">
      {% for i in 0..2 %}
        <li class="flex grow @tablet:grow-0 group">
          <button type="button" class="grow group-first:rounded-s group-first:border-s-0 group-last:rounded-e group-last:border-e-0 group-[&:not(:first-child)]:-ms-0.5 font-bold leading-none text-blue-60v hover:z-10 focus:z-10 text-xl px-6 py-4 ring-inset ring-2 ring-blue-60v hover:ring-blue-warm-70v hover:text-blue-warm-70v active:ring-blue-warm-80v active:text-blue-warm-80v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
        </li>
      {% endfor %}
    </ul>
  </div>

  {# Outline White #}
  <div class="space-y-4 p-4 bg-black">
    <ul class="@container flex">
      {% for i in 0..2 %}
        <li class="flex grow @tablet:grow-0 group">
          <button type="button" class="grow group-first:rounded-s group-first:border-s-0 group-last:rounded-e group-last:border-e-0 group-[&:not(:first-child)]:-ms-0.5 font-bold leading-none text-gray-10 hover:z-10 focus:z-10 px-5 py-3 ring-inset ring-2 ring-gray-10 hover:ring-gray-5 hover:text-gray-5 active:ring-white active:text-white focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
        </li>
      {% endfor %}
    </ul>

    {# Large #}
    <ul class="@container flex">
      {% for i in 0..2 %}
        <li class="flex grow @tablet:grow-0 group">
          <button type="button" class="grow group-first:rounded-s group-first:border-s-0 group-last:rounded-e group-last:border-e-0 group-[&:not(:first-child)]:-ms-0.5 font-bold leading-none text-gray-10 hover:z-10 focus:z-10 text-xl px-6 py-4 ring-inset ring-2 ring-gray-10 hover:ring-gray-5 hover:text-gray-5 active:ring-white active:text-white focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
        </li>
      {% endfor %}
    </ul>
  </div>
</div>