Tabs Section.

<!-- Tabs Section -->
        <section class="section">
            <h2>Tabs</h2>

            <!-- Basic Tabs -->
            <div class="tabs-showcase">
                <h3>Basic Tabs</h3>
                <div class="tabs">
                    <div class="tabs-header">
                        <button class="tab-btn active" data-tab="tab1">Dashboard</button>
                        <button class="tab-btn" data-tab="tab2">Profile</button>
                        <button class="tab-btn" data-tab="tab3">Settings</button>
                        <button class="tab-btn" data-tab="tab4">Help</button>
                    </div>
                    <div class="tabs-content">
                        <div class="tab-panel active" id="tab1">
                            <h4>Dashboard Content</h4>
                            <p>This is your main dashboard overview. Here you can see all your important metrics and data.</p>
                        </div>
                        <div class="tab-panel" id="tab2">
                            <h4>Profile Content</h4>
                            <p>Manage your profile settings and personal information here.</p>
                        </div>
                        <div class="tab-panel" id="tab3">
                            <h4>Settings Content</h4>
                            <p>Configure your application settings and preferences.</p>
                        </div>
                        <div class="tab-panel" id="tab4">
                            <h4>Help Content</h4>
                            <p>Need help? Find guides and documentation here.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

Last updated