<!-- 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-xs font-medium 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-xs font-medium 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-xs font-medium 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-xs font-medium 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>

	<!-- 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-xs font-medium 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-xs font-medium" 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-xs font-medium" 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-xs font-medium" 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>	

<!-- Nav tabs -->
<ul class="nav nav-pills  mb-6 flex flex-wrap light">
	<li class=" nav-item">
		<a href="javascript:void(0);" data-tab="navpills-1" class="nav-link sm:text-sm text-xs text-primary dark:text-white py-[5px] px-3 duration-500 border border-transparent tab-btn active">Tab One</a>
	</li>
	<li class="nav-item">
		<a href="javascript:void(0);" data-tab="navpills-2" class="nav-link sm:text-sm text-xs text-primary dark:text-white py-[5px] px-3 duration-500 border border-transparent tab-btn">Tab Two</a>
	</li>
	<li class="nav-item">
		<a href="javascript:void(0);" data-tab="navpills-3" class="nav-link sm:text-sm text-xs text-primary dark:text-white py-[5px] px-3 duration-500 border border-transparent tab-btn" data-bs-toggle="tab" aria-expanded="true">Tab Three</a>
	</li>
</ul>
<div class="tab-content-area">
	<div id="navpills-1" class="tab-content show active">
		<div class="row">
			<div class="w-full">Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.
				<p class="mb-4">
					<br> Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid.</p>
			</div>
		</div>
	</div>
	<div id="navpills-2" class="tab-content">
		<div class="row">
			<div class="w-full"> Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.
				<p class="mb-4">
					<br>  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
			</div>
		</div>
	</div>
	<div id="navpills-3" class="tab-content">
		<div class="row">
			<div class="w-full">Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.
				<p class="mb-4">
					<br>  Reprehenderit butcher retro keffiyeh dreamcatcher synth.ex squid.</p>
			</div>
		</div>
	</div>
</div>	

	<!-- Nav tabs -->
	<ul class="nav nav-pills flex flex-wrap justify-end mb-4">
		<li class=" nav-item">
			<a href="javascript:void(0);" data-tab="navpills2-1" class="nav-link py-[5px] px-3 block rounded duration-500 text-[13px] dark:text-primary tab-btn active">Tab One</a>
		</li>
		<li class="nav-item">
			<a href="javascript:void(0);" data-tab="navpills2-2" class="nav-link py-[5px] px-3 block rounded duration-500 text-[13px] dark:text-primary tab-btn">Tab Two</a>
		</li>
		<li class="nav-item">
			<a href="javascript:void(0);" data-tab="navpills2-3" class="nav-link py-[5px] px-3 block rounded duration-500 text-[13px] dark:text-primary tab-btn" data-bs-toggle="tab" aria-expanded="true">Tab Three</a>
		</li>
	</ul>
	<div class="tab-content-area">
		<div id="navpills2-1" class="tab-content show active">
			<div class="row">
				<div class="w-full"> Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.
					<p class="mb-4">
						<br> Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid.</p>
				</div>
			</div>
		</div>
		<div id="navpills2-2" class="tab-content">
			<div class="row">
				<div class="w-full"> Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.
					<p class="mb-4">
						<br>   It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
				</div>
			</div>
		</div>
		<div id="navpills2-3" class="tab-content">
			<div class="row">
				<div class="w-full"> Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.
					<p class="mb-4">
						<br>   Reprehenderit butcher retro keffiyeh dreamcatcher synth.ex squid.</p>
				</div>
			</div>
		</div>
	</div>	

<!-- Nav tabs -->
<div class="sm:w-1/3">
	<div class="nav flex flex-wrap flex-col nav-pills mb-3">
		<a href="javascript:void(0);" data-tab="v-pills-home" class="nav-link py-[5px] px-3 block rounded duration-500 text-[13px] dark:text-primary tab-btn active show">Home</a>
		<a href="javascript:void(0);" data-tab="v-pills-profile" class="nav-link py-[5px] px-3 block rounded duration-500 text-[13px] dark:text-primary tab-btn">Profile</a>
		<a href="javascript:void(0);" data-tab="v-pills-messages" class="nav-link py-[5px] px-3 block rounded duration-500 text-[13px] dark:text-primary tab-btn">Messages</a> 
		<a href="javascript:void(0);" data-tab="v-pills-settings" class="nav-link py-[5px] px-3 block rounded duration-500 text-[13px] dark:text-primary tab-btn">Settings</a>
	</div>
</div>
<div class="sm:w-2/3">
	<div class="tab-content-area">
		<div id="v-pills-home" class="tab-content active show">
			<p class="mb-4">Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis
				et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt
				minim occaecat.
			</p>
		</div>
		<div id="v-pills-profile" class="tab-content">
			<p class="mb-4">Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum
				velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint
				minim consectetur qui.
			</p>
		</div>
		<div id="v-pills-messages" class="tab-content">
			<p class="mb-4">Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit
				et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.</p>
		</div>
		<div id="v-pills-settings" class="tab-content">
			<p class="mb-4">Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet
				qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.</p>
		</div>
	</div>
</div>

<!-- Nav tabs -->
<div class="sm:w-2/3">
	<div class="tab-content-area">
		<div id="v-pills-home1" class="tab-content active show">
			<p class="mb-4">Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis
				et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt
				minim occaecat.
			</p>
		</div>
		<div id="v-pills-profile1" class="tab-content">
			<p class="mb-4">Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum
				velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint
				minim consectetur qui.
			</p>
		</div>
		<div id="v-pills-messages1" class="tab-content">
			<p class="mb-4">Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit
				et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.</p>
		</div>
		<div id="v-pills-settings1" class="tab-content">
			<p class="mb-4">Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet
				qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.</p>
		</div>
	</div>
</div>
<div class="sm:w-1/3">
	<div class="nav flex flex-wrap flex-col nav-pills">
		<a href="javascript:void(0);" data-tab="v-pills-home1" class="nav-link py-[5px] px-3 block rounded duration-500 text-[13px] dark:text-primary tab-btn active show">Home</a>
		<a href="javascript:void(0);" data-tab="v-pills-profile1" class="nav-link py-[5px] px-3 block rounded duration-500 text-[13px] dark:text-primary tab-btn">Profile</a>
		<a href="javascript:void(0);" data-tab="v-pills-messages1" class="nav-link py-[5px] px-3 block rounded duration-500 text-[13px] dark:text-primary tab-btn">Messages</a>
		<a href="javascript:void(0);" data-tab="v-pills-settings1" class="nav-link py-[5px] px-3 block rounded duration-500 text-[13px] dark:text-primary tab-btn">Settings</a>
	</div>
</div>

<!-- 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-xs font-medium 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-xs font-medium 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-xs font-medium 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">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">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">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>