Example of Tab Component made using AlpineJS only

alpinejs-tab-image.blade.php

<div x-data="{ openTab: 1 }" class="flex flex-col-reverse">
    <div class="hidden mt-6 w-full max-w-2xl mx-auto sm:block lg:max-w-none">
        <div class="grid grid-cols-4 gap-6" aria-orientation="horizontal" role="tablist">
            @foreach ($product->productImages as $productImage)
                <button x-on:click="{ openTab = {{ $loop->iteration }} }" id="tabs-1-tab-{{ $loop->iteration }}"
                    class="relative h-24 bg-white rounded-md flex items-center justify-center text-sm font-medium uppercase text-gray-900 cursor-pointer hover:bg-gray-50 focus:outline-none focus:ring focus:ring-offset-4 focus:ring-opacity-50"
                    aria-controls="tabs-1-panel-{{ $loop->iteration }}"
                    :tabindex="openTab === {{ $loop->iteration }} ? 0 : -1"
                    :aria-selected="openTab === {{ $loop->iteration }} ? 'true' : 'false'"
                    role="tab"
                    type="button">
                    <span class="sr-only">
                        Angled view
                    </span>
                    <span class="absolute inset-0 rounded-md overflow-hidden">
                        <img src="{{ asset('/uploads/images') . '/' . $productImage->image }}" alt="{{ $productImage->image }}"
                            class="w-full h-full object-center object-cover">
                    </span>
                    <span class="ring-transparent absolute inset-0 rounded-md ring-2 ring-offset-2 pointer-events-none"
                        :class="{ 'ring-indigo-500': openTab === {{ $loop->iteration }}, 'ring-transparent': openTab !== {{ $loop->iteration }} }"
                        aria-hidden="true"></span>
                </button>
            @endforeach
        </div>
    </div>

    <div class="w-full aspect-w-1 aspect-h-1">
        @foreach ($product->productImages as $productImage)
            <div x-show="openTab === {{ $loop->iteration }}" id="tabs-1-panel-{{ $loop->iteration }}"
                aria-labelledby="tabs-1-tab-{{ $loop->iteration }}" role="tabpanel" tabindex="0">
                <img src="{{ asset('/uploads/images') . '/' . $productImage->image }}" alt="{{ $productImage->image }}"
                    class="w-full h-full object-center object-cover sm:rounded-lg">
            </div>
        @endforeach
    </div>
</div>