Composant Onglets
Un composant Tabs réactif avec un style Material Design, une palette de couleurs monochromatiques et une prise en charge du thème sombre, conçu avec Tailwind CSS pour les sites Web à fort contenu.
HTML Code
<div class="max-w-4xl mx-auto my-8">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="flex border-b border-gray-200 dark:border-gray-700">
<button class="flex-1 py-4 px-6 text-center text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus:text-blue-600 dark:focus:text-blue-400 border-b-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition duration-300 ease-in-out">
Recent Posts
</button>
<button class="flex-1 py-4 px-6 text-center text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus:text-blue-600 dark:focus:text-blue-400 border-b-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition duration-300 ease-in-out">
Categories
</button>
<button class="flex-1 py-4 px-6 text-center text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus:text-blue-600 dark:focus:text-blue-400 border-b-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition duration-300 ease-in-out">
Authors
</button>
</div>
<div class="p-6">
<!-- Content for 'Recent Posts' tab -->
<div class="space-y-4">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">A Guide to Responsive Web Design</h3>
<p class="text-gray-700 dark:text-gray-300">Learn the fundamentals of creating websites that adapt seamlessly to various screen sizes and devices.</p>
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
<img class="w-8 h-8 rounded-full mr-2" src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
<span>John Doe</span>
<span class="mx-2">•</span>
<span>October 26, 2023</span>
</div>
<hr class="border-gray-200 dark:border-gray-700">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">Understanding CSS Grid Layout</h3>
<p class="text-gray-700 dark:text-gray-300">Explore the power and flexibility of CSS Grid for building complex two-dimensional layouts.</p>
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
<img class="w-8 h-8 rounded-full mr-2" src="https://www.randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar">
<span>Jane Smith</span>
<span class="mx-2">•</span>
<span>October 20, 2023</span>
</div>
</div>
<!-- Content for 'Categories' tab (hidden by default, would be shown with JS) -->
<!-- <div class="space-y-4 hidden">
<ul class="list-disc list-inside text-gray-700 dark:text-gray-300">
<li>Technology</li>
<li>Programming</li>
<li>Design</li>
<li>Lifestyle</li>
</ul>
</div> -->
<!-- Content for 'Authors' tab (hidden by default, would be shown with JS) -->
<!-- <div class="space-y-4 hidden">
<div class="flex items-center space-x-4">
<img class="w-12 h-12 rounded-full" src="https://www.randomuser.me/api/portraits/men/76.jpg" alt="Author Avatar">
<div>
<p class="font-semibold text-gray-900 dark:text-white">David Lee</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Content Creator</p>
</div>
</div>
<div class="flex items-center space-x-4">
<img class="w-12 h-12 rounded-full" src="https://www.randomuser.me/api/portraits/women/65.jpg" alt="Author Avatar">
<div>
<p class="font-semibold text-gray-900 dark:text-white">Sarah Chen</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Tech Enthusiast</p>
</div>
</div>
</div> -->
</div>
</div>
</div>Composants associés
Composant Luxury Tabs
Un composant d’onglets simple et élégant conçu pour les sites Web de conseil ou de services, avec des tons de bijou et une réactivité totale avec la prise en charge du mode sombre.
Luxury_Tabs_Component
Un composant d’onglets simple, élégant et réactif conçu pour une utilisation sur le marché, doté d’une esthétique luxueuse/premium avec une palette de couleurs complémentaire et une prise en charge du mode sombre.
ArtDecoTabsComponent
Un composant d’onglets complexe et réactif à l’esthétique Art déco, conçu pour les portfolios de photographie, avec des tons bleus d’entreprise et une prise en charge du mode sombre.