This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.
This is some placeholder content the Dashboard tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.
This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.
This is some placeholder content the Contacts tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.
<div class="mb-4 border-b border-gray-200 dark:border-gray-700">
<ul class="flex flex-wrap text-base font-medium text-center text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400" id="default-tab" data-tabs-toggle="#default-tab-content" role="tablist">
<li class="me-2" role="presentation">
<button class="inline-block p-4 text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500" id="profile2-tab" data-tabs-target="#profile2" type="button" role="tab" aria-controls="profile2" aria-selected="false">Profile</button>
</li>
<li class="me-2" role="presentation">
<button class="inline-block p-4 text-blue-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-blue-500" id="dashboard2-tab" data-tabs-target="#dashboard2" type="button" role="tab" aria-controls="dashboard2" aria-selected="false">Dashboard</button>
</li>
<li class="me-2" role="presentation">
<button class="inline-block p-4 text-blue-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-blue-500" id="settings2-tab" data-tabs-target="#settings2" type="button" role="tab" aria-controls="settings2" aria-selected="false">Settings</button>
</li>
<li role="presentation">
<button class="inline-block p-4 text-blue-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-blue-500" id="contacts2-tab" data-tabs-target="#contacts2" type="button" role="tab" aria-controls="contacts2" aria-selected="false">Contacts</button>
</li>
</ul>
</div>
<div id="default-tab-content">
<div class="hidden p-4 rounded-lg" id="profile2" role="tabpanel" aria-labelledby="profile2-tab">
<p class="text-base text-gray-500 dark:text-gray-400">This is some placeholder content the <strong class="font-medium text-gray-800 dark:text-white">Profile tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
</div>
<div class="hidden p-4 rounded-lg" id="dashboard2" role="tabpanel" aria-labelledby="dashboard2-tab">
<p class="text-base text-gray-500 dark:text-gray-400">This is some placeholder content the <strong class="font-medium text-gray-800 dark:text-white">Dashboard tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
</div>
<div class="hidden p-4 rounded-lg" id="settings2" role="tabpanel" aria-labelledby="settings2-tab">
<p class="text-base text-gray-500 dark:text-gray-400">This is some placeholder content the <strong class="font-medium text-gray-800 dark:text-white">Settings tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
</div>
<div class="hidden p-4 rounded-lg" id="contacts2" role="tabpanel" aria-labelledby="contacts2-tab">
<p class="text-base text-gray-500 dark:text-gray-400">This is some placeholder content the <strong class="font-medium text-gray-800 dark:text-white">Contacts tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
</div>
</div>
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.
This is some placeholder content the Dashboard tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.
This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.
This is some placeholder content the Contacts tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.
<div class="mb-4 border-b border-gray-200 dark:border-gray-700">
<ul class="flex flex-wrap -mb-px" id="default-tab" data-tabs-toggle="#default-tab-content" role="tablist">
<li class="me-2" role="presentation">
<button class="inline-block p-4 text-blue-600 border-b-2 border-blue-600 rounded-t-lg active dark:text-blue-500 dark:border-blue-500" id="profile3-tab" data-tabs-target="#profile3" type="button" role="tab" aria-controls="profile3" aria-selected="false">Profile</button>
</li>
<li class="me-2" role="presentation">
<button class="inline-block p-4 text-blue-600 border-b-2 border-blue-600 rounded-t-lg dark:text-blue-500 dark:border-blue-500" id="dashboard3-tab" data-tabs-target="#dashboard3" type="button" role="tab" aria-controls="dashboard3" aria-selected="false">Dashboard</button>
</li>
<li class="me-2" role="presentation">
<button class="inline-block p-4 text-blue-600 border-b-2 border-blue-600 rounded-t-lg dark:text-blue-500 dark:border-blue-500" id="settings3-tab" data-tabs-target="#settings3" type="button" role="tab" aria-controls="settings3" aria-selected="false">Settings</button>
</li>
<li role="presentation">
<button class="inline-block p-4 text-blue-600 border-b-2 border-blue-600 rounded-t-lg dark:text-blue-500 dark:border-blue-500" id="contacts3-tab" data-tabs-target="#contacts3" type="button" role="tab" aria-controls="contacts3" aria-selected="false">Contacts</button>
</li>
</ul>
</div>
<div id="default-tab-content">
<div class="hidden p-4 rounded-lg" id="profile3" role="tabpanel" aria-labelledby="profile3-tab">
<p class="text-base text-gray-500 dark:text-gray-400">This is some placeholder content the <strong class="font-medium text-gray-800 dark:text-white">Profile tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
</div>
<div class="hidden p-4 rounded-lg" id="dashboard3" role="tabpanel" aria-labelledby="dashboard3-tab">
<p class="text-base text-gray-500 dark:text-gray-400">This is some placeholder content the <strong class="font-medium text-gray-800 dark:text-white">Dashboard tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
</div>
<div class="hidden p-4 rounded-lg" id="settings3" role="tabpanel" aria-labelledby="settings3-tab">
<p class="text-base text-gray-500 dark:text-gray-400">This is some placeholder content the <strong class="font-medium text-gray-800 dark:text-white">Settings tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
</div>
<div class="hidden p-4 rounded-lg" id="contacts3" role="tabpanel" aria-labelledby="contacts3-tab">
<p class="text-base text-gray-500 dark:text-gray-400">This is some placeholder content the <strong class="font-medium text-gray-800 dark:text-white">Contacts tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
</div>
</div>
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.
This is some placeholder content the Dashboard tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.
This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.
This is some placeholder content the Contacts tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.
This is some placeholder content the Dashboard tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.
This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.
