Componente Schede
Un componente di schede minimalista per siti Web di e-commerce con elementi interattivi, design reattivo e supporto per la modalità oscura.
Codice HTML
<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>Componenti correlati
Componente Schede
Un componente di schede reattive con microinterazioni per siti Web aziendali/aziendali, con colori complementari e supporto per la modalità scura.
Componente Schede Skeuomorfe
Un componente di schede reattive con scheumorfismo, che utilizza Tailwind CSS per imitare gli elementi di design del mondo reale. Include il supporto per il tema scuro e le immagini segnaposto.
Componente Schede
Un componente Tabs minimalista e vivace per l'e-commerce con complessità moderata, design reattivo e supporto per temi scuri, implementato utilizzando Tailwind CSS e HTML.