Composant Onglets
Un composant d’onglets minimaliste pour les sites Web de commerce électronique avec des éléments interactifs, un design réactif et une prise en charge du mode sombre.
HTML Code
<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>Composants associés
Onglets de conception matérielle
Composant Tabs avec style Material Design, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS, sans JavaScript.
Composant Onglets en mode sombre
Un composant d’onglets réactifs conçu pour le mode sombre, utilisant Tailwind CSS.
Composant Onglets
Un composant d’onglets réactifs conçu dans un style skeuomorphe pour une application de commerce électronique, à l’aide d’une palette de couleurs pastel et d’un CSS Tailwind.