Tabs-Komponente

<div class="container mx-auto p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md">
        <div class="flex items-center space-x-4 border-b">
            <button class="py-2 px-4 text-blue-500 border-b-2 border-blue-500 focus:outline-none">Tab 1</button>
            <button class="py-2 px-4 text-gray-500 hover:text-blue-500 focus:outline-none">Tab 2</button>
            <button class="py-2 px-4 text-gray-500 hover:text-blue-500 focus:outline-none">Tab 3</button>
        </div>
        <div class="p-4">
            <div class="block" id="tab1-content">
                <h2 class="text-lg font-bold text-gray-800 dark:text-white">Tab 1 Content</h2>
                <img class="mt-2 w-full rounded-lg" src="https://picsum.photos/800/400" alt="Random Image">
                <p class="mt-2 text-gray-600 dark:text-gray-400">Explore our exclusive collections in Tab 1. Discover vibrant products that can elevate your shopping experience.</p>
            </div>
            <div class="hidden" id="tab2-content">
                <h2 class="text-lg font-bold text-gray-800 dark:text-white">Tab 2 Content</h2>
                <img class="mt-2 w-full rounded-lg" src="https://picsum.photos/800/401" alt="Random Image">
                <p class="mt-2 text-gray-600 dark:text-gray-400">Find the latest trends and styles in Tab 2. Shop now and enjoy premium materials and designs.</p>
            </div>
            <div class="hidden" id="tab3-content">
                <h2 class="text-lg font-bold text-gray-800 dark:text-white">Tab 3 Content</h2>
                <img class="mt-2 w-full rounded-lg" src="https://picsum.photos/800/402" alt="Random Image">
                <p class="mt-2 text-gray-600 dark:text-gray-400">Check out special deals and discounts in Tab 3. Your ultimate shopping destination is right here.</p>
            </div>
        </div>
    </div>
</div>