10 Tabs Tailwind

5 horizontal · 5 vertical

Tabs horizontaux

1 Classic underline tabs

🏠 Contenu de l'onglet Accueil. Bienvenue sur votre dashboard.
👤 Informations du profil utilisateur et préférences.
⚙️ Réglages de l'application et notifications.

2 Pills arrondis

📊 Vue d'ensemble avec statistiques et graphiques.
👥 Membres de l'équipe et leurs rôles actuels.
📁 Liste des projets en cours et terminés.

3 Tabs avec badges

Vous avez 3 nouveaux messages dans votre boîte de réception.
7 notifications en attente de lecture.
Archives des anciens messages et fichiers.

4 Segmented control

Mode clair activé. Interface lumineuse.
Mode sombre pour réduire la fatigue oculaire.
Changement automatique selon les préférences système.

5 Icônes + tooltips natifs

Événements et rendez-vous à venir cette semaine.
Statistiques de fréquentation et rapports.
Vos éléments mis en favoris.

Tabs verticaux

6 Vertical gauche

Informations générales du compte et profil.
Options de sécurité, authentification à deux facteurs.
Personnalisation du thème et de l'affichage.

7 Vertical droite

Articles en cours d'écriture (3 brouillons).
Contenu publié et visible en ligne.
Éléments supprimés récemment.

8 Style list-group

Page d'accueil personnalisée.
Modification du profil public.
Messagerie et conversations.

9 Pills verticales colorées

Accès aux fonctionnalités de base.
Fonctionnalités avancées et rapports détaillés.
Accès illimité et support prioritaire 24/7.

10 Vertical large avec badges

Boîte de réception (14)

Vous avez 14 messages non lus. Dernier message il y a 5 minutes.

Messages suivis (5)

5 conversations que vous suivez activement.

Messages envoyés

Historique des 8 derniers messages envoyés.

Brouillons

2 brouillons en attente d'envoi.

⚡ 10 exemples d'onglets (tabs) avec Tailwind CSS · 5 horizontaux + 5 verticaux · Gestion par classes CSS