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.
HTML Code
<div class="dark:bg-gray-900 min-h-screen p-8">
<div class="max-w-4xl mx-auto">
<div class="bg-gray-800 dark:bg-gray-950 rounded-lg shadow-xl overflow-hidden">
<div class="flex border-b border-gray-700 dark:border-gray-700">
<button class="flex-1 py-4 px-6 text-center text-lg font-semibold text-cyan-400 dark:text-cyan-500 border-b-2 border-cyan-400 dark:border-cyan-500 hover:bg-gray-700 dark:hover:bg-gray-800 focus:outline-none transition-colors duration-300">
Featured Articles
</button>
<button class="flex-1 py-4 px-6 text-center text-lg font-semibold text-purple-400 dark:text-purple-500 hover:bg-gray-700 dark:hover:bg-gray-800 focus:outline-none transition-colors duration-300">
Popular Posts
</button>
<button class="flex-1 py-4 px-6 text-center text-lg font-semibold text-fuchsia-400 dark:text-fuchsia-500 hover:bg-gray-700 dark:hover:bg-gray-800 focus:outline-none transition-colors duration-300">
Latest News
</button>
</div>
<div class="p-6 md:p-8">
<!-- Tab Content 1: Featured Articles -->
<div class="space-y-8">
<div class="flex flex-col md:flex-row bg-gray-700 dark:bg-gray-900 rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-[1.02]">
<img class="w-full md:w-1/3 h-48 md:h-auto object-cover" src="https://picsum.photos/seed/article1/600/400" alt="Article Thumbnail">
<div class="p-6 flex flex-col justify-between">
<div>
<h3 class="text-2xl font-bold text-white mb-2">The Future of AI in Content Creation</h3>
<p class="text-gray-300 text-base leading-relaxed">Explore how artificial intelligence is revolutionizing the way we create and consume digital content, from automated writing to personalized recommendations.</p>
</div>
<div class="mt-4 flex items-center text-gray-400">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
<span>John Doe • 2 hours ago</span>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row bg-gray-700 dark:bg-gray-900 rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-[1.02]">
<img class="w-full md:w-1/3 h-48 md:h-auto object-cover" src="https://picsum.photos/seed/article2/600/400" alt="Article Thumbnail">
<div class="p-6 flex flex-col justify-between">
<div>
<h3 class="text-2xl font-bold text-white mb-2">Mastering Responsive Design with Tailwind CSS</h3>
<p class="text-gray-300 text-base leading-relaxed">Dive deep into the utility-first CSS framework and learn how to build stunning, responsive web interfaces with ease and efficiency.</p>
</div>
<div class="mt-4 flex items-center text-gray-400">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar">
<span>Jane Smith • Yesterday</span>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row bg-gray-700 dark:bg-gray-900 rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-[1.02]">
<img class="w-full md:w-1/3 h-48 md:h-auto object-cover" src="https://picsum.photos/seed/article3/600/400" alt="Article Thumbnail">
<div class="p-6 flex flex-col justify-between">
<div>
<h3 class="text-2xl font-bold text-white mb-2">The Art of Storytelling in Digital Media</h3>
<p class="text-gray-300 text-base leading-relaxed">Uncover the timeless principles of captivating narratives and how they apply to modern digital platforms and content forms.</p>
</div>
<div class="mt-4 flex items-center text-gray-400">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Author Avatar">
<span>Peter Jones • 3 days ago</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Onglets
Un composant d’onglets réactif avec un design skeuomorphe, une palette de couleurs analogue et une prise en charge du thème sombre, adapté aux sites Web d’entreprise professionnels. Le composant utilise Tailwind CSS pour le style et n’inclut aucun code JavaScript.
Composant Onglets d’actualités Art Déco
Il s’agit d’un composant d’onglets complexe, réactif et luxueux de style « Art déco » conçu pour les sites d’actualités et de journalisme, avec des motifs géométriques, des couleurs analogues riches et la prise en charge du mode sombre. Il fournit plusieurs éléments interactifs pour la navigation dans le contenu.
Composant Onglets neumorphes
Un composant d’onglets neumorphiques en niveaux de gris pour le contenu de blog, avec un design réactif et la prise en charge du mode sombre.