
<div class="bg-surface-50-600 p-4 rounded-container flex flex-col justify-center items-center gap-2">
    <div class="btn-group-error">
        <button>
            <span class="text-xl i-material-symbols:water-drop-rounded" />
            <span>Water</span>
        </button>
        <button>
            <span class="text-xl i-material-symbols:globe-uk" />
            <span>Earth</span>
        </button>
        <button>
            <span class="text-xl i-mdi:fire" />
            <span>Fire</span>
        </button>
        <button>
            <span class="text-xl i-mdi-weather-windy-variant" />
            <span>Air</span>
        </button>
    </div>
    <div class="btn-group-tertiary">
        <button aria-label="water">
            <span class="text-xl i-material-symbols:water-drop-rounded" />
        </button>
        <button aria-label="earth">
            <span class="text-xl i-material-symbols:globe-uk" />
        </button>
        <button aria-label="fire">
            <span class="text-xl i-mdi:fire" />
        </button>
        <button aria-label="air">
            <span class="text-xl i-mdi-weather-windy-variant" />
        </button>
    </div>
</div>