
<div class="bg-surface-50-600 p-4 rounded-container flex flex-col justify-center items-center gap-2">
    <div class="btn-group-outline-primary">
        <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-vertical-outline-warning">
        <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>