Tailwind
Tabs
Tailwind Design
Template
Html
Integration Tabs
Dashboard
Tabs Tailwind optimisées pour la visualisation et l'interaction. Composants modernes et responsive.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Snippet Tabs Tailwind 2026 23040044 | AngularForAll</title>
<!-- Tailwind via CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Police Inter -->
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz@14..32&display=swap" rel="stylesheet">
<style>
* { font-family: 'Inter', sans-serif; }
/* Gestion de l'affichage des tabs (sans JS) */
.tab-content > div { display: none; }
.tab-content > div.active { display: block; }
/* Animation subtile */
.tab-content > div.active { animation: fade 0.2s ease; }
@keyframes fade { from { opacity: 0.5; } to { opacity: 1; } }
</style>
</head>
<body class="bg-slate-50 p-6 md:p-8">
<div class="max-w-7xl mx-auto">
<!-- En-tête -->
<div class="mb-8 flex flex-wrap items-center justify-between gap-3">
<h1 class="text-3xl md:text-4xl font-extrabold text-slate-800 tracking-tight">
<span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-600">10 Tabs</span> Tailwind
</h1>
<span class="bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full text-sm font-semibold shadow-sm">5 horizontal · 5 vertical</span>
</div>
<!-- ========== HORIZONTAL TABS (5) ========== -->
<h2 class="text-2xl font-bold text-slate-800 mt-8 mb-5 flex items-center gap-2">
<span class="w-2 h-8 bg-blue-500 rounded-full"></span> Tabs horizontaux
</h2>
<!-- 1. Tabs classiques avec bordure inférieure -->
<div class="bg-white rounded-2xl shadow-md border border-slate-100 p-5 mb-6">
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2"><span class="w-6 h-6 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center text-sm font-bold">1</span> Classic underline tabs</h3>
<div class="border-b border-slate-200">
<nav class="flex gap-6 -mb-px">
<button class="tab-btn-active pb-3 px-1 text-sm font-semibold text-blue-600 border-b-2 border-blue-600" data-tab="tab1-1">Accueil</button>
<button class="tab-btn pb-3 px-1 text-sm font-medium text-slate-500 hover:text-slate-700 border-b-2 border-transparent hover:border-slate-300" data-tab="tab1-2">Profil</button>
<button class="tab-btn pb-3 px-1 text-sm font-medium text-slate-500 hover:text-slate-700 border-b-2 border-transparent hover:border-slate-300" data-tab="tab1-3">Paramètres</button>
</nav>
</div>
<div class="tab-content mt-5 text-slate-600">
<div class="active" id="tab1-1">🏠 Contenu de l'onglet Accueil. Bienvenue sur votre dashboard.</div>
<div id="tab1-2">👤 Informations du profil utilisateur et préférences.</div>
<div id="tab1-3">⚙️ Réglages de l'application et notifications.</div>
</div>
</div>
<!-- 2. Tabs style "pills" arrondis -->
<div class="bg-white rounded-2xl shadow-md border border-slate-100 p-5 mb-6">
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2"><span class="w-6 h-6 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center text-sm font-bold">2</span> Pills arrondis</h3>
<nav class="flex gap-2 p-1 bg-slate-100 rounded-2xl w-fit">
<button class="tab-btn-active px-5 py-2 text-sm font-semibold rounded-xl bg-white text-slate-800 shadow-sm" data-tab="tab2-1">Dashboard</button>
<button class="tab-btn px-5 py-2 text-sm font-medium rounded-xl text-slate-600 hover:bg-white/60" data-tab="tab2-2">Équipe</button>
<button class="tab-btn px-5 py-2 text-sm font-medium rounded-xl text-slate-600 hover:bg-white/60" data-tab="tab2-3">Projets</button>
</nav>
<div class="tab-content mt-5 text-slate-600">
<div class="active" id="tab2-1">📊 Vue d'ensemble avec statistiques et graphiques.</div>
<div id="tab2-2">👥 Membres de l'équipe et leurs rôles actuels.</div>
<div id="tab2-3">📁 Liste des projets en cours et terminés.</div>
</div>
</div>
<!-- 3. Tabs avec badges et icônes -->
<div class="bg-white rounded-2xl shadow-md border border-slate-100 p-5 mb-6">
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2"><span class="w-6 h-6 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center text-sm font-bold">3</span> Tabs avec badges</h3>
<nav class="flex flex-wrap gap-3">
<button class="tab-btn-active flex items-center gap-2 px-4 py-2 bg-blue-50 text-blue-700 rounded-full text-sm font-semibold border border-blue-200" data-tab="tab3-1">
<span>📨 Messages</span>
<span class="bg-red-500 text-white text-xs px-2 py-0.5 rounded-full">3</span>
</button>
<button class="tab-btn flex items-center gap-2 px-4 py-2 bg-slate-50 text-slate-600 rounded-full text-sm font-medium border border-slate-200 hover:bg-slate-100" data-tab="tab3-2">
<span>🔔 Notifications</span>
<span class="bg-amber-500 text-white text-xs px-2 py-0.5 rounded-full">7</span>
</button>
<button class="tab-btn flex items-center gap-2 px-4 py-2 bg-slate-50 text-slate-600 rounded-full text-sm font-medium border border-slate-200 hover:bg-slate-100" data-tab="tab3-3">
<span>📦 Archives</span>
</button>
</nav>
<div class="tab-content mt-5 text-slate-600">
<div class="active" id="tab3-1">Vous avez 3 nouveaux messages dans votre boîte de réception.</div>
<div id="tab3-2">7 notifications en attente de lecture.</div>
<div id="tab3-3">Archives des anciens messages et fichiers.</div>
</div>
</div>
<!-- 4. Tabs style "segmented" / boutons -->
<div class="bg-white rounded-2xl shadow-md border border-slate-100 p-5 mb-6">
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2"><span class="w-6 h-6 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center text-sm font-bold">4</span> Segmented control</h3>
<nav class="inline-flex rounded-lg border border-slate-200 p-1 bg-slate-50">
<button class="tab-btn-active px-4 py-2 text-sm font-medium rounded-md bg-white text-slate-800 shadow-sm" data-tab="tab4-1">☀️ Jour</button>
<button class="tab-btn px-4 py-2 text-sm font-medium rounded-md text-slate-600 hover:bg-white/50" data-tab="tab4-2">🌙 Nuit</button>
<button class="tab-btn px-4 py-2 text-sm font-medium rounded-md text-slate-600 hover:bg-white/50" data-tab="tab4-3">🌓 Auto</button>
</nav>
<div class="tab-content mt-5 text-slate-600">
<div class="active" id="tab4-1">Mode clair activé. Interface lumineuse.</div>
<div id="tab4-2">Mode sombre pour réduire la fatigue oculaire.</div>
<div id="tab4-3">Changement automatique selon les préférences système.</div>
</div>
</div>
<!-- 5. Tabs avec icônes et tooltips (style simple) -->
<div class="bg-white rounded-2xl shadow-md border border-slate-100 p-5 mb-6">
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2"><span class="w-6 h-6 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center text-sm font-bold">5</span> Icônes + tooltips natifs</h3>
<nav class="flex gap-4 border-b border-slate-200 pb-2">
<button class="tab-btn-active text-blue-600" data-tab="tab5-1" title="Calendrier">
<span class="text-2xl">📅</span>
</button>
<button class="tab-btn text-slate-400 hover:text-slate-600" data-tab="tab5-2" title="Statistiques">
<span class="text-2xl">📊</span>
</button>
<button class="tab-btn text-slate-400 hover:text-slate-600" data-tab="tab5-3" title="Favoris">
<span class="text-2xl">⭐</span>
</button>
</nav>
<div class="tab-content mt-4 text-slate-600">
<div class="active" id="tab5-1">Événements et rendez-vous à venir cette semaine.</div>
<div id="tab5-2">Statistiques de fréquentation et rapports.</div>
<div id="tab5-3">Vos éléments mis en favoris.</div>
</div>
</div>
<!-- ========== VERTICAL TABS (5) ========== -->
<h2 class="text-2xl font-bold text-slate-800 mt-12 mb-5 flex items-center gap-2">
<span class="w-2 h-8 bg-emerald-500 rounded-full"></span> Tabs verticaux
</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- 6. Vertical gauche classique -->
<div class="bg-white rounded-2xl shadow-md border border-slate-100 p-5">
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2"><span class="w-6 h-6 bg-emerald-100 text-emerald-700 rounded-full flex items-center justify-center text-sm font-bold">6</span> Vertical gauche</h3>
<div class="flex gap-5">
<nav class="flex flex-col gap-1 min-w-[130px]">
<button class="tab-btn-active text-left px-4 py-2.5 text-sm font-semibold bg-indigo-50 text-indigo-700 rounded-lg" data-tab="tab6-1">📋 Informations</button>
<button class="tab-btn text-left px-4 py-2.5 text-sm font-medium text-slate-600 hover:bg-slate-50 rounded-lg" data-tab="tab6-2">🔒 Sécurité</button>
<button class="tab-btn text-left px-4 py-2.5 text-sm font-medium text-slate-600 hover:bg-slate-50 rounded-lg" data-tab="tab6-3">🎨 Apparence</button>
</nav>
<div class="tab-content flex-1 text-slate-600">
<div class="active" id="tab6-1">Informations générales du compte et profil.</div>
<div id="tab6-2">Options de sécurité, authentification à deux facteurs.</div>
<div id="tab6-3">Personnalisation du thème et de l'affichage.</div>
</div>
</div>
</div>
<!-- 7. Vertical droite -->
<div class="bg-white rounded-2xl shadow-md border border-slate-100 p-5">
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2"><span class="w-6 h-6 bg-emerald-100 text-emerald-700 rounded-full flex items-center justify-center text-sm font-bold">7</span> Vertical droite</h3>
<div class="flex flex-row-reverse gap-5">
<nav class="flex flex-col gap-1 min-w-[130px]">
<button class="tab-btn-active text-left px-4 py-2.5 text-sm font-semibold bg-amber-50 text-amber-700 rounded-lg" data-tab="tab7-1">📝 Brouillons</button>
<button class="tab-btn text-left px-4 py-2.5 text-sm font-medium text-slate-600 hover:bg-slate-50 rounded-lg" data-tab="tab7-2">✅ Publiés</button>
<button class="tab-btn text-left px-4 py-2.5 text-sm font-medium text-slate-600 hover:bg-slate-50 rounded-lg" data-tab="tab7-3">🗑️ Corbeille</button>
</nav>
<div class="tab-content flex-1 text-slate-600">
<div class="active" id="tab7-1">Articles en cours d'écriture (3 brouillons).</div>
<div id="tab7-2">Contenu publié et visible en ligne.</div>
<div id="tab7-3">Éléments supprimés récemment.</div>
</div>
</div>
</div>
<!-- 8. Vertical style "list-group" -->
<div class="bg-white rounded-2xl shadow-md border border-slate-100 p-5">
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2"><span class="w-6 h-6 bg-emerald-100 text-emerald-700 rounded-full flex items-center justify-center text-sm font-bold">8</span> Style list-group</h3>
<div class="flex gap-4">
<div class="flex flex-col min-w-[140px] border border-slate-200 rounded-xl overflow-hidden divide-y divide-slate-200">
<button class="tab-btn-active px-4 py-3 text-sm font-medium bg-blue-50 text-blue-700 hover:bg-blue-100 text-left" data-tab="tab8-1">🏠 Accueil</button>
<button class="tab-btn px-4 py-3 text-sm font-medium text-slate-600 hover:bg-slate-50 text-left" data-tab="tab8-2">👤 Profil</button>
<button class="tab-btn px-4 py-3 text-sm font-medium text-slate-600 hover:bg-slate-50 text-left" data-tab="tab8-3">💬 Messages</button>
</div>
<div class="tab-content flex-1 text-slate-600">
<div class="active" id="tab8-1">Page d'accueil personnalisée.</div>
<div id="tab8-2">Modification du profil public.</div>
<div id="tab8-3">Messagerie et conversations.</div>
</div>
</div>
</div>
<!-- 9. Vertical pills colorées avec fond -->
<div class="bg-white rounded-2xl shadow-md border border-slate-100 p-5">
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2"><span class="w-6 h-6 bg-emerald-100 text-emerald-700 rounded-full flex items-center justify-center text-sm font-bold">9</span> Pills verticales colorées</h3>
<div class="flex gap-4">
<nav class="flex flex-col gap-2 p-3 bg-gradient-to-b from-indigo-50 to-purple-50 rounded-2xl min-w-[130px]">
<button class="tab-btn-active text-left px-4 py-2.5 text-sm font-semibold bg-white text-indigo-700 rounded-xl shadow-sm" data-tab="tab9-1">🏆 Niveau 1</button>
<button class="tab-btn text-left px-4 py-2.5 text-sm font-medium text-indigo-600 hover:bg-white/60 rounded-xl" data-tab="tab9-2">💎 Niveau 2</button>
<button class="tab-btn text-left px-4 py-2.5 text-sm font-medium text-indigo-600 hover:bg-white/60 rounded-xl" data-tab="tab9-3">⭐ Premium</button>
</nav>
<div class="tab-content flex-1 text-slate-600">
<div class="active" id="tab9-1">Accès aux fonctionnalités de base.</div>
<div id="tab9-2">Fonctionnalités avancées et rapports détaillés.</div>
<div id="tab9-3">Accès illimité et support prioritaire 24/7.</div>
</div>
</div>
</div>
<!-- 10. Vertical large avec badges -->
<div class="bg-white rounded-2xl shadow-md border border-slate-100 p-5 lg:col-span-2">
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2"><span class="w-6 h-6 bg-emerald-100 text-emerald-700 rounded-full flex items-center justify-center text-sm font-bold">10</span> Vertical large avec badges</h3>
<div class="flex flex-col md:flex-row gap-6">
<nav class="flex flex-col gap-2 md:w-64">
<button class="tab-btn-active flex justify-between items-center px-5 py-3 text-sm font-semibold bg-slate-100 rounded-xl" data-tab="tab10-1">
<span class="flex items-center gap-2">📥 Boîte de réception</span>
<span class="bg-blue-500 text-white text-xs px-2.5 py-1 rounded-full">14</span>
</button>
<button class="tab-btn flex justify-between items-center px-5 py-3 text-sm font-medium text-slate-600 hover:bg-slate-50 rounded-xl" data-tab="tab10-2">
<span class="flex items-center gap-2">⭐ Suivis</span>
<span class="bg-slate-400 text-white text-xs px-2.5 py-1 rounded-full">5</span>
</button>
<button class="tab-btn flex justify-between items-center px-5 py-3 text-sm font-medium text-slate-600 hover:bg-slate-50 rounded-xl" data-tab="tab10-3">
<span class="flex items-center gap-2">📤 Envoyés</span>
<span class="bg-slate-400 text-white text-xs px-2.5 py-1 rounded-full">8</span>
</button>
<button class="tab-btn flex justify-between items-center px-5 py-3 text-sm font-medium text-slate-600 hover:bg-slate-50 rounded-xl" data-tab="tab10-4">
<span class="flex items-center gap-2">🗂️ Brouillons</span>
<span class="bg-slate-400 text-white text-xs px-2.5 py-1 rounded-full">2</span>
</button>
</nav>
<div class="tab-content flex-1 bg-slate-50 p-5 rounded-xl text-slate-700">
<div class="active" id="tab10-1">
<h4 class="font-semibold mb-2">Boîte de réception (14)</h4>
<p>Vous avez 14 messages non lus. Dernier message il y a 5 minutes.</p>
</div>
<div id="tab10-2">
<h4 class="font-semibold mb-2">Messages suivis (5)</h4>
<p>5 conversations que vous suivez activement.</p>
</div>
<div id="tab10-3">
<h4 class="font-semibold mb-2">Messages envoyés</h4>
<p>Historique des 8 derniers messages envoyés.</p>
</div>
<div id="tab10-4">
<h4 class="font-semibold mb-2">Brouillons</h4>
<p>2 brouillons en attente d'envoi.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="text-slate-400 text-sm text-center mt-12 pt-6 border-t border-slate-200">
⚡ 10 exemples d'onglets (tabs) avec Tailwind CSS · 5 horizontaux + 5 verticaux · Gestion par classes CSS
</div>
</div>
<!-- JavaScript minimal pour gérer les tabs -->
<script>
(function() {
// Gestion des clics sur tous les boutons d'onglets
document.querySelectorAll('.tab-btn, .tab-btn-active').forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault();
// Trouver le conteneur parent (nav) puis le conteneur de contenu associé
const container = this.closest('.bg-white, .flex-col') || this.closest('.bg-white');
const tabContainer = container?.querySelector('.tab-content') ||
this.closest('.bg-white')?.querySelector('.tab-content') ||
this.closest('.flex')?.parentElement?.querySelector('.tab-content') ||
this.closest('.flex-col')?.parentElement?.querySelector('.tab-content');
// Fallback : chercher dans le parent commun
const parentCard = this.closest('.bg-white');
const targetTabContent = parentCard?.querySelector('.tab-content');
if (!targetTabContent) return;
const tabId = this.getAttribute('data-tab');
// Désactiver tous les boutons du même groupe
const siblingBtns = parentCard.querySelectorAll('.tab-btn, .tab-btn-active');
siblingBtns.forEach(b => {
b.classList.remove('tab-btn-active', 'active', 'bg-indigo-50', 'text-indigo-700', 'bg-blue-50', 'text-blue-700', 'bg-amber-50', 'text-amber-700', 'bg-white', 'text-blue-600', 'border-blue-600');
// réinitialiser les styles par défaut
if (b.classList.contains('border-b-2')) {
b.classList.add('border-transparent', 'text-slate-500');
} else {
b.classList.add('text-slate-600', 'bg-slate-50', 'hover:bg-slate-100');
}
});
// Activer le bouton cliqué (styles varient selon contexte)
this.classList.add('tab-btn-active');
if (parentCard.querySelector('.border-b-2')) {
this.classList.add('text-blue-600', 'border-blue-600');
this.classList.remove('border-transparent', 'text-slate-500');
} else {
this.classList.add('active');
}
// Mettre à jour le contenu
const allPanes = targetTabContent.querySelectorAll('div');
allPanes.forEach(pane => {
pane.classList.remove('active');
});
const activePane = document.getElementById(tabId);
if (activePane) {
activePane.classList.add('active');
}
});
});
})();
</script>
<!-- Styles additionnels pour la gestion visuelle des tabs -->
<style>
.tab-btn-active {
/* styles de base pour bouton actif - seront surchargés */
}
/* Assurer que les styles actifs sont bien appliqués */
.bg-white .tab-btn-active.border-b-2 {
border-bottom-width: 2px;
border-color: #2563eb;
color: #2563eb;
}
/* Pour les pills */
.bg-white .tab-btn-active:not(.border-b-2) {
background-color: white;
color: #1e293b;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* Vertical actif */
.tab-btn-active.bg-indigo-50 {
background-color: #eef2ff !important;
color: #4338ca !important;
}
.tab-btn-active.bg-amber-50 {
background-color: #fffbeb !important;
color: #b45309 !important;
}
.tab-btn-active.bg-blue-50 {
background-color: #eff6ff !important;
color: #1d4ed8 !important;
}
</style>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur