Default Tab
This is home title
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.
This is profile title
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor.
This is contact title
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.
This is message title
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor.
<!-- Nav tabs -->
<div class="default-tab dz-tab-area">
<ul class="nav nav-tabs flex flex-wrap border-b border-b-color boder-tabs" role="tablist">
<li class="nav-item">
<a href="javascript:void(0);" class="nav-link py-[5px] px-3 block mb-[-2px] border border-transparent rounded-ss-md rounded-se-md text-primary duration-500 text-sm tab-btn active" data-tab="home"><i class="la la-home mr-2 scale-150 inline-block"></i> Home</a>
</li>
<li class="nav-item">
<a href="javascript:void(0);" class="nav-link py-[5px] px-3 block mb-[-2px] border border-transparent rounded-ss-md rounded-se-md text-primary duration-500 text-sm tab-btn" data-tab="profile"><i class="la la-user mr-2 scale-150 inline-block"></i> Profile</a>
</li>
<li class="nav-item">
<a href="javascript:void(0);" class="nav-link py-[5px] px-3 block mb-[-2px] border border-transparent rounded-ss-md rounded-se-md text-primary duration-500 text-sm tab-btn" data-tab="contact"><i class="la la-phone mr-2 scale-150 inline-block"></i> Contact</a>
</li>
<li class="nav-item">
<a href="javascript:void(0);" class="nav-link py-[5px] px-3 block mb-[-2px] border border-transparent rounded-ss-md rounded-se-md text-primary duration-500 text-sm tab-btn" data-tab="message"><i class="la la-envelope mr-2 scale-150 inline-block"></i> Message</a>
</li>
</ul>
<div class="tab-content-area">
<div class="tab-content show active" id="home" role="tabpanel">
<div class="pt-6">
<h4 class="mb-4 sm:text-xl">This is home title</h4>
<p class="mb-4">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.
</p>
<p class="mb-4">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.
</p>
</div>
</div>
<div class="tab-content" id="profile">
<div class="pt-6">
<h4 class="mb-4 sm:text-xl">This is profile title</h4>
<p class="mb-4">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor.
</p>
<p class="mb-4">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor.
</p>
</div>
</div>
<div class="tab-content" id="contact">
<div class="pt-6">
<h4 class="mb-4 sm:text-xl">This is contact title</h4>
<p class="mb-4">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.
</p>
<p class="mb-4">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.
</p>
</div>
</div>
<div class="tab-content" id="message">
<div class="pt-6">
<h4 class="mb-4 sm:text-xl">This is message title</h4>
<p class="mb-4">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor.
</p>
<p class="mb-4">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor.
</p>
</div>
</div>
</div>
</div>
Custom Tab 1
This is home title
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.
This is profile title
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor.
This is contact title
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.
This is message title
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor.
<!-- Nav tabs -->
<div class="custom-tab-1 dz-tab-area children">
<ul class="nav nav-tabs flex flex-wrap border-b border-b-color">
<li class="nav-item">
<a href="javascript:void(0);" class="nav-link py-[5px] px-3 block border-b-[3px] border-transparent rounded-ss-md rounded-se-md text-primary duration-500 text-sm tab-btn active" data-tab="home1"><i class="la la-home mr-2 scale-150 inline-block"></i> Home</a>
</li>
<li class="nav-item">
<a href="javascript:void(0);" class="nav-link py-[5px] px-3 block border-b-[3px] border-transparent rounded-ss-md rounded-se-md text-primary duration-500 text-sm tab-btn" data-tab="profile1"><i class="la la-user mr-2 scale-150 inline-block"></i> Profile</a>
</li>
<li class="nav-item">
<a href="javascript:void(0);" class="nav-link py-[5px] px-3 block border-b-[3px] border-transparent rounded-ss-md rounded-se-md text-primary duration-500 text-sm tab-btn" data-tab="contact1"><i class="la la-phone mr-2 scale-150 inline-block"></i> Contact</a>
</li>
<li class="nav-item">
<a href="javascript:void(0);" class="nav-link py-[5px] px-3 block border-b-[3px] border-transparent rounded-ss-md rounded-se-md text-primary duration-500 text-sm tab-btn" data-tab="message1"><i class="la la-envelope mr-2 scale-150 inline-block"></i> Message</a>
</li>
</ul>
<div class="tab-content-area">
<div class="tab-content show active" id="home1" role="tabpanel">
<div class="pt-6">
<h4 class="mb-4 sm:text-xl">This is home title</h4>
<p class="mb-4">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.
</p>
<p class="mb-4">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.
</p>
</div>
</div>
<div class="tab-content" id="profile1">
<div class="pt-6">
<h4 class="mb-4 sm:text-xl">This is profile title</h4>
<p class="mb-4">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor.
</p>
<p class="mb-4">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor.
</p>
</div>
</div>
<div class="tab-content" id="contact1">
<div class="pt-6">
<h4 class="mb-4 sm:text-xl">This is contact title</h4>
<p class="mb-4">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.
</p>
<p class="mb-4">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.
</p>
</div>
</div>
<div class="tab-content" id="message1">
<div class="pt-6">
<h4 class="mb-4 sm:text-xl">This is message title</h4>
<p class="mb-4">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor.
</p>
<p class="mb-4">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor.
</p>
</div>
</div>
</div>
</div>
Tab with icon
This is icon title 1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting
This is icon title 2
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting
This is icon title 3
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting
<!-- Nav tabs -->
<ul class="nav nav-tabs flex flex-wrap border-b border-b-color boder-tabs" role="tablist">
<li class="nav-item">
<a href="javascript:void(0);" class="nav-link py-[5px] px-3 block mb-[-2px] border border-transparent rounded-ss-md rounded-se-md text-primary duration-500 text-sm tab-btn active" data-tab="home8">
<span>
<i class="ti-home"></i>
</span>
</a>
</li>
<li class="nav-item">
<a href="javascript:void(0);" class="nav-link py-[5px] px-3 block mb-[-2px] border border-transparent rounded-ss-md rounded-se-md text-primary duration-500 text-sm tab-btn" data-tab="profile8">
<span>
<i class="ti-user"></i>
</span>
</a>
</li>
<li class="nav-item">
<a href="javascript:void(0);" class="nav-link py-[5px] px-3 block mb-[-2px] border border-transparent rounded-ss-md rounded-se-md text-primary duration-500 text-sm tab-btn" data-tab="messages8">
<span>
<i class="ti-email"></i>
</span>
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content-area tabcontent-border">
<div class="tab-content show active" id="home8" role="tabpanel">
<div class="pt-6">
<h4 class="mb-4 sm:text-xl">This is icon title 1</h4>
<p class="mb-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting
</p>
<p class="mb-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting
</p>
</div>
</div>
<div class="tab-content" id="profile8" role="tabpanel">
<div class="pt-6">
<h4 class="mb-4 sm:text-xl">This is icon title 2</h4>
<p class="mb-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting
</p>
<p class="mb-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting
</p>
</div>
</div>
<div class="tab-content" id="messages8" role="tabpanel">
<div class="pt-6">
<h4 class="mb-4 sm:text-xl">This is icon title 3</h4>
<p class="mb-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting
</p>
<p class="mb-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting
</p>
</div>
</div>
</div>