Componente Schede
Un componente di schede reattive progettato in uno stile scheumorfico per un'applicazione di e-commerce, utilizzando una combinazione di colori pastello e Tailwind CSS.
Codice HTML
<div class="max-w-3xl mx-auto p-4">
<h2 class="text-2xl font-semibold mb-4">Product Categories</h2>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700">
<div class="flex border-b border-gray-200 dark:border-gray-600">
<button class="flex-1 py-3 text-center text-gray-700 dark:text-gray-200 font-semibold rounded-t-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400">
<span>Electronics</span>
</button>
<button class="flex-1 py-3 text-center text-gray-700 dark:text-gray-200 font-semibold rounded-t-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400">
<span>Clothing</span>
</button>
<button class="flex-1 py-3 text-center text-gray-700 dark:text-gray-200 font-semibold rounded-t-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400">
<span>Home & Kitchen</span>
</button>
</div>
<div class="p-4">
<div class="tab-content hidden">
<h3 class="text-xl font-semibold">Electronics</h3>
<img src="https://picsum.photos/300/200?random=1" alt="Electronics" class="rounded-lg mb-4">
<p class="text-gray-600 dark:text-gray-400">Latest gadgets and devices for your tech needs.</p>
</div>
<div class="tab-content hidden">
<h3 class="text-xl font-semibold">Clothing</h3>
<img src="https://picsum.photos/300/200?random=2" alt="Clothing" class="rounded-lg mb-4">
<p class="text-gray-600 dark:text-gray-400">Trendy and comfortable apparel for all occasions.</p>
</div>
<div class="tab-content hidden">
<h3 class="text-xl font-semibold">Home & Kitchen</h3>
<img src="https://picsum.photos/300/200?random=3" alt="Home & Kitchen" class="rounded-lg mb-4">
<p class="text-gray-600 dark:text-gray-400">Quality products to enhance your living spaces.</p>
</div>
</div>
</div>
</div>Componenti correlati
VetrosoScala di grigiSchede
Componente Glassmorphism Grayscale Simple Dashboard Tabs con 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 di schede minimalista per siti Web di e-commerce con elementi interattivi, design reattivo e supporto per la modalità oscura.