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