Show Tab Content when option selected

Question

I want to show some tab content, when the tab is clicked. At a small device, I will show instead a select. And when the option is chosen, it show the tab content.

How can I solve it?

<div x-data="{
            activeTab:1,
            activeClass: 'border-indigo-500 text-indigo-600 whitespace-nowrap pb-4 px-6 border-b-2 font-medium',
            inactiveClass : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap pb-4 px-6 border-b-2 font-medium text-sm'
         }" class="mt-3 sm:mt-4">
            <div class="sm:hidden">
                <label for="activeTab" class="sr-only">Select a tab</label>
                <select id="activeTab" name="activeTab" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
                    <option value="1">Tab 1</option>
                    <option value="2">Tab 2</option>
                    <option Value="3">Tab 3</option>
                </select>
            </div>
                <div class="hidden sm:block">
                    <nav class="-mb-px flex ">
                        <a href="#" x-on:click="activeTab = 1" :class="activeTab === 1 ? activeClass : inactiveClass">Tab 1</a>
                        <a href="#" x-on:click="activeTab = 2" :class="activeTab === 2 ? activeClass : inactiveClass">Tab 2</a>
                        <a href="#" x-on:click="activeTab = 3" :class="activeTab === 3 ? activeClass : inactiveClass">Tab 3</a>
                    </nav>
                </div>
                <div class="mt-6 bg-white border p-3">
                    <div x-show="activeTab === 1"> Tab 1 Content show Lorem ipsum dolor sit amet consectetur adipisicing
                        elit.
                        Quas debitis nam
                        cupiditate. Explicabo, beatae voluptates aspernatur aliquid quia hic nobis quaerat quae enim
                        quis.
                        Quas sunt ducimus numquam! Quam, perspiciatis!
                    </div>
                    <div x-show="activeTab === 2">Tab 2 Content show Lorem ipsum dolor sit amet consectetur,
                        adipisicing elit.
                        Voluptatem unde dolor
                        quaerat et possimus consequatur similique soluta corporis nam consectetur, cum, eveniet sunt,
                        nulla
                        aliquam rem. Exercitationem corporis eius voluptatibus.
                    </div>
                    <div x-show="activeTab === 3">Tab 3 Content show Lorem ipsum dolor sit amet consectetur
                        adipisicing elit. Amet,
                        distinctio
                        voluptas quis cum reprehenderit libero ea quidem voluptatem sunt suscipit, excepturi, tenetur
                        assumenda sequi eius minus temporibus earum odit soluta.
                    </div>
                </div>
            </div>