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.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="w-full max-w-md">
<div class="flex justify-center">
<button class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-200 dark:bg-gray-800 rounded-tl-lg focus:outline-none transition duration-300 ease-in-out hover:bg-gray-300 dark:hover:bg-gray-700 data-[state=active]:bg-white dark:data-[state=active]:bg-gray-700 data-[state=active]:text-gray-800 dark:data-[state=active]:text-white" data-state="active" data-tab="tab1">
About Us
</button>
<button class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-200 dark:bg-gray-800 focus:outline-none transition duration-300 ease-in-out hover:bg-gray-300 dark:hover:bg-gray-700 data-[state=active]:bg-white dark:data-[state=active]:bg-gray-700 data-[state=active]:text-gray-800 dark:data-[state=active]:text-white" data-tab="tab2">
Our Services
</button>
<button class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-200 dark:bg-gray-800 rounded-tr-lg focus:outline-none transition duration-300 ease-in-out hover:bg-gray-300 dark:hover:bg-gray-700 data-[state=active]:bg-white dark:data-[state=active]:bg-gray-700 data-[state=active]:text-gray-800 dark:data-[state=active]:text-white" data-tab="tab3">
Contact
</button>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-b-lg shadow-md">
<div data-tab-content="tab1">
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Our Company Story</h2>
<p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img src="https://picsum.photos/400/200" alt="Company Image" class="mt-4 rounded-md">
</div>
<div class="hidden" data-tab-content="tab2">
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">What We Offer</h2>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-300">
<li>Consulting Services</li>
<li>Development & Design</li>
<li>Marketing Solutions</li>
</ul>
<img src="https://picsum.photos/400/201" alt="Services Image" class="mt-4 rounded-md">
</div>
<div class="hidden" data-tab-content="tab3">
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Get in Touch</h2>
<p class="text-gray-600 dark:text-gray-300">Email: [email protected]</p>
<p class="text-gray-600 dark:text-gray-300">Phone: (123) 456-7890</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
<p class="text-gray-800 dark:text-white">John Doe, CEO</p>
</div>
</div>
</div>
</div>
</div>Composants associés
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 de style brutaliste pour les médias sociaux, avec des couleurs complémentaires et un design complexe et réactif, y compris la prise en charge du thème 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.