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>