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.
HTML Code
<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>Composants associés
IndustrielVibrantOnglets
Il s’agit d’un composant d’onglets complexe, dynamique et à thème industriel, adapté à une place de marché multi-fournisseurs, présentant des éléments exposés, une esthétique de matière première et des couleurs à haute saturation. Entièrement réactif avec prise en charge du mode sombre.
Composant Onglets
Composant Responsive Tabs avec tons de terre et micro-interactions pour les sites Web d’entreprise, prenant en charge le mode sombre à l’aide de Tailwind CSS. Utilise uniquement les classes HTML et Tailwind.
Composant Onglets
Un composant d’onglets réactif avec prise en charge du mode sombre pour la consommation de blog/contenu. Utilise une palette de couleurs triadique avec des arrière-plans sombres pour réduire la fatigue oculaire.