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
Industrial_Monochromatic_Tabs_Component_Booking_Reservation
Un composant d’onglets simple et réactif à l’esthétique industrielle et monochrome, conçu pour les systèmes de réservation et de réservation. Il prend en charge le mode sombre et utilise des matériaux bruts et des éléments exposés pour un attrait utilitaire.
Composant Onglets - Emploi/Carrière
Un composant d’onglets réactifs avec une esthétique Material Design et une palette de couleurs pastel, adapté aux sites d’emploi ou aux plateformes de carrière. Inclut la prise en charge du mode sombre.
Composant Tabs skeuomorphic
Un composant d’onglets réactifs stylisé avec un skeuomorphisme, utilisant Tailwind CSS pour imiter les éléments de conception du monde réel. Il inclut la prise en charge du thème sombre et des images de remplacement.