bootstrap 5 tabs with icons and underline hover effect

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/7.1.0/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/7.1.0/ionicons/ionicons.js"></script>

    <div class="tabs-container">
        <!-- Page Header -->
        <div class="page-header">
            <h1>Tabs with Icons</h1>
            <p>Beautiful, interactive tabs with underline hover effects</p>
        </div>

        <!-- Style 1: Standard Horizontal Tabs -->
        <div class="tabs-card">
            <ul class="nav custom-tabs" id="mainTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab">
                        <ion-icon name="home"></ion-icon>
                        Home
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab">
                        <ion-icon name="person"></ion-icon>
                        Profile
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab">
                        <ion-icon name="mail"></ion-icon>
                        Messages
                        <span class="tab-badge">3</span>
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab">
                        <ion-icon name="settings"></ion-icon>
                        Settings
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="analytics-tab" data-bs-toggle="tab" data-bs-target="#analytics" type="button" role="tab">
                        <ion-icon name="bar-chart"></ion-icon>
                        Analytics
                    </button>
                </li>
            </ul>

            <div class="tab-content custom-tab-content" id="mainTabsContent">
                <!-- Home Tab -->
                <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                    <div class="tab-content-header">
                        <div class="tab-content-icon">
                            <ion-icon name="home"></ion-icon>
                        </div>
                        <h3>Welcome Home</h3>
                    </div>
                    <p class="tab-description">
                        Welcome to your dashboard! Here you'll find an overview of your account activity, recent updates, and quick access to important features. Get started by exploring the different sections available.
                    </p>
                    <div class="tab-features">
                        <div class="feature-card">
                            <div class="feature-icon">
                                <ion-icon name="speedometer"></ion-icon>
                            </div>
                            <div class="feature-title">Quick Access</div>
                            <p class="feature-description">Access your most used features and tools instantly from the dashboard.</p>
                        </div>
                        <div class="feature-card">
                            <div class="feature-icon">
                                <ion-icon name="notifications"></ion-icon>
                            </div>
                            <div class="feature-title">Real-time Updates</div>
                            <p class="feature-description">Stay informed with instant notifications about important events.</p>
                        </div>
                        <div class="feature-card">
                            <div class="feature-icon">
                                <ion-icon name="shield-checkmark"></ion-icon>
                            </div>
                            <div class="feature-title">Secure & Safe</div>
                            <p class="feature-description">Your data is protected with enterprise-grade security measures.</p>
                        </div>
                    </div>
                </div>

                <!-- Profile Tab -->
                <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                    <div class="tab-content-header">
                        <div class="tab-content-icon">
                            <ion-icon name="person"></ion-icon>
                        </div>
                        <h3>Your Profile</h3>
                    </div>
                    <p class="tab-description">
                        Manage your personal information, update your profile picture, and customize your account preferences. Keep your profile up-to-date to get the most personalized experience.
                    </p>
                    <div class="tab-features">
                        <div class="feature-card">
                            <div class="feature-icon">
                                <ion-icon name="create"></ion-icon>
                            </div>
                            <div class="feature-title">Edit Profile</div>
                            <p class="feature-description">Update your personal details, bio, and contact information easily.</p>
                        </div>
                        <div class="feature-card">
                            <div class="feature-icon">
                                <ion-icon name="image"></ion-icon>
                            </div>
                            <div class="feature-title">Profile Picture</div>
                            <p class="feature-description">Upload and customize your profile picture to personalize your account.</p>
                        </div>
                    </div>
                </div>

                <!-- Messages Tab -->
                <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">
                    <div class="tab-content-header">
                        <div class="tab-content-icon">
                            <ion-icon name="mail"></ion-icon>
                        </div>
                        <h3>Messages</h3>
                    </div>
                    <p class="tab-description">
                        View and manage all your messages in one place. Stay connected with your team, respond to inquiries, and keep track of important conversations. You have 3 unread messages.
                    </p>
                    <div class="tab-features">
                        <div class="feature-card">
                            <div class="feature-icon">
                                <ion-icon name="chatbubbles"></ion-icon>
                            </div>
                            <div class="feature-title">Conversations</div>
                            <p class="feature-description">Organize and manage all your conversations in threaded views.</p>
                        </div>
                        <div class="feature-card">
                            <div class="feature-icon">
                                <ion-icon name="search"></ion-icon>
                            </div>
                            <div class="feature-title">Search Messages</div>
                            <p class="feature-description">Quickly find any message with powerful search capabilities.</p>
                        </div>
                        <div class="feature-card">
                            <div class="feature-icon">
                                <ion-icon name="archive"></ion-icon>
                            </div>
                            <div class="feature-title">Archive</div>
                            <p class="feature-description">Keep your inbox clean by archiving old conversations.</p>
                        </div>
                    </div>
                </div>

                <!-- Settings Tab -->
                <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">
                    <div class="tab-content-header">
                        <div class="tab-content-icon">
                            <ion-icon name="settings"></ion-icon>
                        </div>
                        <h3>Settings</h3>
                    </div>
                    <p class="tab-description">
                        Configure your account settings, manage privacy preferences, and customize your experience. Control notifications, security options, and integration settings from here.
                    </p>
                    <div class="tab-features">
                        <div class="feature-card">
                            <div class="feature-icon">
                                <ion-icon name="lock-closed"></ion-icon>
                            </div>
                            <div class="feature-title">Privacy & Security</div>
                            <p class="feature-description">Manage your privacy settings and security preferences.</p>
                        </div>
                        <div class="feature-card">
                            <div class="feature-icon">
                                <ion-icon name="notifications"></ion-icon>
                            </div>
                            <div class="feature-title">Notifications</div>
                            <p class="feature-description">Customize when and how you receive notifications.</p>
                        </div>
                    </div>
                </div>

                <!-- Analytics Tab -->
                <div class="tab-pane fade" id="analytics" role="tabpanel" aria-labelledby="analytics-tab">
                    <div class="tab-content-header">
                        <div class="tab-content-icon">
                            <ion-icon name="bar-chart"></ion-icon>
                        </div>
                        <h3>Analytics Dashboard</h3>
                    </div>
                    <p class="tab-description">
                        Track your performance with detailed analytics and insights. Monitor key metrics, view trends over time, and make data-driven decisions to improve your results.
                    </p>
                    <div class="tab-features">
                        <div class="feature-card">
                            <div class="feature-icon">
                                <ion-icon name="trending-up"></ion-icon>
                            </div>
                            <div class="feature-title">Performance Metrics</div>
                            <p class="feature-description">Track key performance indicators and growth metrics.</p>
                        </div>
                        <div class="feature-card">
                            <div class="feature-icon">
                                <ion-icon name="stats-chart"></ion-icon>
                            </div>
                            <div class="feature-title">Reports</div>
                            <p class="feature-description">Generate detailed reports for deeper insights into your data.</p>
                        </div>
                        <div class="feature-card">
                            <div class="feature-icon">
                                <ion-icon name="calendar"></ion-icon>
                            </div>
                            <div class="feature-title">Historical Data</div>
                            <p class="feature-description">Access and analyze historical data to identify trends.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Style 2: Pill Tabs -->
        <div class="tabs-card">
            <ul class="nav pill-tabs" id="pillTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab">
                        <ion-icon name="apps"></ion-icon>
                        Overview
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="team-tab" data-bs-toggle="tab" data-bs-target="#team" type="button" role="tab">
                        <ion-icon name="people"></ion-icon>
                        Team
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="projects-tab" data-bs-toggle="tab" data-bs-target="#projects" type="button" role="tab">
                        <ion-icon name="briefcase"></ion-icon>
                        Projects
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="reports-tab" data-bs-toggle="tab" data-bs-target="#reports" type="button" role="tab">
                        <ion-icon name="document-text"></ion-icon>
                        Reports
                    </button>
                </li>
            </ul>

            <div class="tab-content custom-tab-content" id="pillTabsContent">
                <div class="tab-pane fade show active" id="overview" role="tabpanel">
                    <div class="tab-content-header">
                        <div class="tab-content-icon">
                            <ion-icon name="apps"></ion-icon>
                        </div>
                        <h3>Overview</h3>
                    </div>
                    <p class="tab-description">
                        Get a comprehensive view of your workspace with the overview dashboard. See all your active projects, team activities, and recent updates at a glance.
                    </p>
                </div>
                <div class="tab-pane fade" id="team" role="tabpanel">
                    <div class="tab-content-header">
                        <div class="tab-content-icon">
                            <ion-icon name="people"></ion-icon>
                        </div>
                        <h3>Team Management</h3>
                    </div>
                    <p class="tab-description">
                        Manage your team members, assign roles, and track collaboration. Invite new members and monitor team performance.
                    </p>
                </div>
                <div class="tab-pane fade" id="projects" role="tabpanel">
                    <div class="tab-content-header">
                        <div class="tab-content-icon">
                            <ion-icon name="briefcase"></ion-icon>
                        </div>
                        <h3>Projects</h3>
                    </div>
                    <p class="tab-description">
                        View and manage all your projects in one place. Create new projects, track progress, and collaborate with your team effectively.
                    </p>
                </div>
                <div class="tab-pane fade" id="reports" role="tabpanel">
                    <div class="tab-content-header">
                        <div class="tab-content-icon">
                            <ion-icon name="document-text"></ion-icon>
                        </div>
                        <h3>Reports & Analytics</h3>
                    </div>
                    <p class="tab-description">
                        Generate detailed reports and access analytics for your projects and team performance. Export data in various formats.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>

     * {
            font-family: 'Roboto', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 60px 20px;
        }

        .tabs-container {
            max-width: 1000px;
            margin: 0 auto;
        }

        .page-header {
            text-align: center;
            color: white;
            margin-bottom: 50px;
        }

        .page-header h1 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 15px;
        }

        .page-header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        /* Tabs Card */
        .tabs-card {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            overflow: hidden;
            margin-bottom: 40px;
        }

        /* Custom Nav Tabs */
        .custom-tabs {
            display: flex;
            border-bottom: 2px solid #e0e0e0;
            background: #f8f9fa;
            padding: 0;
            margin: 0;
            list-style: none;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
        }

        .custom-tabs::-webkit-scrollbar {
            height: 4px;
        }

        .custom-tabs::-webkit-scrollbar-thumb {
            background: #667eea;
            border-radius: 4px;
        }

        .custom-tabs .nav-item {
            flex-shrink: 0;
        }

        .custom-tabs .nav-link {
            border: none;
            background: transparent;
            color: #7f8c8d;
            padding: 20px 30px;
            font-weight: 500;
            font-size: 15px;
            position: relative;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
            border-radius: 0;
            white-space: nowrap;
        }

        .custom-tabs .nav-link ion-icon {
            font-size: 22px;
            transition: all 0.3s ease;
        }

        .custom-tabs .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .custom-tabs .nav-link:hover {
            color: #667eea;
            background: rgba(102, 126, 234, 0.05);
        }

        .custom-tabs .nav-link:hover::after {
            transform: scaleX(1);
        }

        .custom-tabs .nav-link:hover ion-icon {
            transform: translateY(-3px);
        }

        .custom-tabs .nav-link.active {
            color: #667eea;
            background: white;
            font-weight: 600;
        }

        .custom-tabs .nav-link.active::after {
            transform: scaleX(1);
        }

        .custom-tabs .nav-link.active ion-icon {
            color: #667eea;
        }

        /* Tab Content */
        .custom-tab-content {
            padding: 40px;
        }

        .tab-pane {
            animation: fadeIn 0.5s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .tab-content-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 25px;
        }

        .tab-content-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
        }

        .tab-content-header h3 {
            font-size: 1.8rem;
            font-weight: 700;
            color: #2c3e50;
            margin: 0;
        }

        .tab-description {
            color: #7f8c8d;
            line-height: 1.8;
            margin-bottom: 25px;
            font-size: 15px;
        }

        .tab-features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        .feature-card {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 12px;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .feature-card:hover {
            background: white;
            border-color: #667eea;
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
        }

        .feature-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            margin-bottom: 15px;
        }

        .feature-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 10px;
        }

        .feature-description {
            color: #7f8c8d;
            font-size: 0.9rem;
            line-height: 1.6;
            margin: 0;
        }

        /* Vertical Tabs Style */
        .vertical-tabs-container {
            display: flex;
            gap: 0;
        }

        .vertical-tabs {
            flex-direction: column;
            border-bottom: none;
            border-right: 2px solid #e0e0e0;
            background: #f8f9fa;
            min-width: 250px;
        }

        .vertical-tabs .nav-link {
            text-align: left;
            justify-content: flex-start;
        }

        .vertical-tabs .nav-link::after {
            left: auto;
            right: 0;
            width: 3px;
            height: 100%;
            transform: scaleY(0);
        }

        .vertical-tabs .nav-link:hover::after,
        .vertical-tabs .nav-link.active::after {
            transform: scaleY(1);
        }

        /* Pill Style Tabs */
        .pill-tabs {
            border-bottom: none;
            background: transparent;
            padding: 20px;
            gap: 10px;
            flex-wrap: wrap;
        }

        .pill-tabs .nav-link {
            border-radius: 50px;
            background: white;
            border: 2px solid #e0e0e0;
            padding: 12px 25px;
        }

        .pill-tabs .nav-link::after {
            display: none;
        }

        .pill-tabs .nav-link:hover {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        .pill-tabs .nav-link.active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-color: transparent;
        }

        /* Badge */
        .tab-badge {
            background: #f093fb;
            color: white;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            margin-left: 8px;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .custom-tabs .nav-link {
                padding: 15px 20px;
                font-size: 14px;
            }

            .custom-tab-content {
                padding: 25px 20px;
            }

            .tab-content-header h3 {
                font-size: 1.5rem;
            }

            .vertical-tabs-container {
                flex-direction: column;
            }

            .vertical-tabs {
                flex-direction: row;
                border-right: none;
                border-bottom: 2px solid #e0e0e0;
                min-width: auto;
                overflow-x: auto;
            }

            .vertical-tabs .nav-link::after {
                left: 0;
                right: 0;
                top: auto;
                bottom: 0;
                width: 100%;
                height: 3px;
                transform: scaleX(0);
            }

            .vertical-tabs .nav-link:hover::after,
            .vertical-tabs .nav-link.active::after {
                transform: scaleX(1);
            }

            .page-header h1 {
                font-size: 2rem;
            }
        }