Highlighting an active tab.

Hello all,

with the following code I am trying to implement two tabs. This works very well so far.

<div class="basis-4/12 m-10" x-data="tabs">
    <div class="overflow-hidden rounded-lg bg-white shadow">
        <div class="px-4 py-5 sm:p-6">
            <div x-data="{ selected: 'stammdaten' }">

                <div class="border-b border-gray-200">
                    <nav class="-mb-px flex space-x-8" aria-label="Tabs">
                        <!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" -->
                        <a href="#stammdaten" x-on:click="selected = 'stammdaten'" x-show:class="selected === 'stammdaten' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm" aria-current="page">Stammdaten</a>
                        <a href="#weitere_daten" x-on:click="selected = 'weitere_daten'" x-show:class="selected === 'weitere_daten' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Weitere Daten</a>
                    </nav>
                </div>

                <div x-show="selected === 'stammdaten'">
                    <div class="px-0 sm:px-0 lg:px-0">
                        <h1>Inhalt, Tab-1</h1>
                    </div>
                </div>

                <div x-show="selected === 'weitere_daten'">
                    <div class="px-0 sm:px-0 lg:px-0">
                        <h1>Inhalt, Tab-2</h1>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

However, I have a problem in the area x-show:class=.... I would like that the selected tab is visible in color. But here I seem to make a mistake. Do you have an idea how I can realize this?

Greetings.