<div class="default-tab " x-data="{ tab: 'tab-home' }">
    <ul class="nav nav-tabs flex flex-wrap border-b border-border boder-tabs" role="tablist">
        <li class="nav-item">
            <a href="javascript:void(0);" class="py-2 px-4 block -mb-0.5 font-medium border border-transparent rounded-t-lg text-primary duration-500" 
            @click.prevent="tab = 'tab-home'"
            :class="{ ' border-t-border border-x-border bg-card': tab == '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="py-2 px-4 block -mb-0.5 font-medium border border-transparent rounded-t-lg text-primary duration-500" 
            @click.prevent="tab = 'tab-profile'"
            :class="{ ' border-t-border border-x-border bg-card': tab == '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="py-2 px-4 block -mb-0.5 font-medium border border-transparent rounded-t-lg text-primary duration-500" 
            @click.prevent="tab = 'tab-contact'"
            :class="{ ' border-t-border border-x-border bg-card': tab == '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="py-2 px-4 block -mb-0.5 font-medium border border-transparent rounded-t-lg text-primary duration-500" 
            @click.prevent="tab = 'tab-message'"
            :class="{ ' border-t-border border-x-border bg-card': tab == 'tab-message'}">
            <i class="la la-envelope mr-2 scale-150 inline-block"></i> Message</a>
        </li>
    </ul>
    <div class="tab-content-area">
        <div x-show="tab == 'tab-home'" 
        x-transition:enter="transition-all duration-700 easy-in-out"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100">
            <div class="pt-6">
                <h4 class="mb-2 ">This is home title</h4>
                <p class="mb-4 sm:text-sm">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 sm:text-sm">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 x-show="tab == 'tab-profile'" 
        x-transition:enter="transition-all duration-700 easy-in-out"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100">
            <div class="pt-6">
                <h4 class="mb-2 ">This is profile title</h4>
                <p class="mb-4 sm:text-sm">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 sm:text-sm">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 x-show="tab == 'tab-contact'" 
        x-transition:enter="transition-all duration-700 easy-in-out"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100">
            <div class="pt-6">
                <h4 class="mb-2 ">This is contact title</h4>
                <p class="mb-4 sm:text-sm">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 sm:text-sm">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 x-show="tab == 'tab-message'" 
        x-transition:enter="transition-all duration-700 easy-in-out"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100">
            <div class="pt-6">
                <h4 class="mb-2 ">This is message title</h4>
                <p class="mb-4 sm:text-sm">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 sm:text-sm">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>
														
													

														
<div x-data="{ tab: 'tab-home1' }">
    <ul class="nav nav-tabs flex flex-wrap border-b border-border">
        <li class="nav-item">
            <a href="javascript:void(0);" class="py-2 px-4 font-medium block border-b-[3px] border-transparent rounded-t-lg text-primary duration-500" 
            @click.prevent="tab = 'tab-home1'"
            :class="{ 'border-b-primary': tab == '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="py-2 px-4 font-medium block border-b-[3px] border-transparent rounded-t-lg text-primary duration-500" 
            @click.prevent="tab = 'tab-profile1'"
            :class="{ 'border-b-primary': tab == '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="py-2 px-4 font-medium block border-b-[3px] border-transparent rounded-t-lg text-primary duration-500" 
            @click.prevent="tab = 'tab-contact1'"
            :class="{ 'border-b-primary': tab == '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="py-2 px-4 font-medium block border-b-[3px] border-transparent rounded-t-lg text-primary duration-500" 
            @click.prevent="tab = 'tab-message1'"
            :class="{ 'border-b-primary': tab == 'tab-message1'}">
            <i class="la la-envelope mr-2 scale-150 inline-block"></i> Message</a>
        </li>
    </ul>
    <div class="tab-content-area">
        <div x-show="tab == 'tab-home1'"
        x-transition:enter="transition-all duration-700 easy-in-out"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100">
            <div class="pt-6">
                <h4 class="mb-2 ">This is home title</h4>
                <p class="mb-4 sm:text-sm">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 sm:text-sm">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 x-show="tab == 'tab-profile1'"
        x-transition:enter="transition-all duration-700 easy-in-out"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100">
            <div class="pt-6">
                <h4 class="mb-2 ">This is profile title</h4>
                <p class="mb-4 sm:text-sm">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 sm:text-sm">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 x-show="tab == 'tab-contact1'"
        x-transition:enter="transition-all duration-700 easy-in-out"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100">
            <div class="pt-6">
                <h4 class="mb-2 ">This is contact title</h4>
                <p class="mb-4 sm:text-sm">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 sm:text-sm">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 x-show="tab == 'tab-message1'"
        x-transition:enter="transition-all duration-700 easy-in-out"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100">
            <div class="pt-6">
                <h4 class="mb-2 ">This is message title</h4>
                <p class="mb-4 sm:text-sm">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 sm:text-sm">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>
														
													

														
<div x-data="{ tab: 'tab-navpills-1' }">
	<ul class="nav nav-pills  mb-6 flex flex-wrap light">
		<li class=" nav-item">
			<a href="javascript:void(0);" class="py-2.5 px-3.6 block text-primary rounded-lg duration-500"
			@click.prevent="tab = 'tab-navpills-1'"
			:class="{ 'bg-primarylight': tab == 'tab-navpills-1'}">Tab One</a>
		</li>
		<li class="nav-item">
			<a href="javascript:void(0);" class="py-2.5 px-3.6 block text-primary rounded-lg duration-500"
			@click.prevent="tab = 'tab-navpills-2'"
			:class="{ 'bg-primarylight': tab == 'tab-navpills-2'}">Tab Two</a>
		</li>
		<li class="nav-item">
			<a href="javascript:void(0);" class="py-2.5 px-3.6 block text-primary rounded-lg duration-500"
			@click.prevent="tab = 'tab-navpills-3'"
			:class="{ 'bg-primarylight': tab == 'tab-navpills-3'}">Tab Three</a>
		</li>
	</ul>
	<div class="tab-content-area">
		<div x-show="tab == 'tab-navpills-1'" 
		x-transition:enter="transition-all duration-700 easy-in-out"
		x-transition:enter-start="opacity-0"
		x-transition:enter-end="opacity-100">
			<div class="row">
				<div>
					<p class="mb-4 sm:text-sm">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.</p>
					<p class="mb-4 sm:text-sm">
						<br> Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid.</p>
				</div>
			</div>
		</div>
		<div x-show="tab == 'tab-navpills-2'" 
		x-transition:enter="transition-all duration-700 easy-in-out"
		x-transition:enter-start="opacity-0"
		x-transition:enter-end="opacity-100">
			<div class="row">
				<div> 
					<p class="mb-4 sm:text-sm">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>
					<p class="mb-4 sm:text-sm">
						<br> Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid.</p>
				</div>
			</div>
		</div>
		<div x-show="tab == 'tab-navpills-3'" 
		x-transition:enter="transition-all duration-700 easy-in-out"
		x-transition:enter-start="opacity-0"
		x-transition:enter-end="opacity-100">
			<div class="row">
				<div>
					<p class="mb-4 sm:text-sm">Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p>
					<p class="mb-4 sm:text-sm">
						<br> Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid.</p>
				</div>
			</div>
		</div>
	</div>
</div>
														
													

														
<div x-data="{ tab: 'navpills2-1' }">
    <ul class="nav nav-pills flex flex-wrap justify-end mb-4">
        <li class=" nav-item">
            <a href="javascript:void(0);" class="py-2.5 px-3.6 block text-primary rounded-lg duration-500"
            @click.prevent="tab = 'navpills2-1'"
            :class="{ 'bg-primary text-white': tab == 'navpills2-1'}">Tab One</a>
        </li>
        <li class="nav-item">
            <a href="javascript:void(0);" class="py-2.5 px-3.6 block text-primary rounded-lg duration-500"
            @click.prevent="tab = 'navpills2-2'"
            :class="{ 'bg-primary text-white': tab == 'navpills2-2'}">Tab Two</a>
        </li>
        <li class="nav-item">
            <a href="javascript:void(0);" class="py-2.5 px-3.6 block text-primary rounded-lg duration-500"
            @click.prevent="tab = 'navpills2-3'"
            :class="{ 'bg-primary text-white': tab == 'navpills2-3'}">Tab Three</a>
        </li>
    </ul>
    <div class="tab-content-area">
        <div x-show="tab == 'navpills2-1'" 
        x-transition:enter="transition-all duration-700 easy-in-out"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100">
            <div class="row">
                <div> 
                    <p class="mb-4 sm:text-sm">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>
                    <p class="mb-4 sm:text-sm">
                        <br> Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid.</p>
                </div>
            </div>
        </div>
        <div x-show="tab == 'navpills2-2'" 
        x-transition:enter="transition-all duration-700 easy-in-out"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100">
            <div class="row">
                <div> 
                    <p class="mb-4 sm:text-sm">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>
                    <p class="mb-4 sm:text-sm">
                        <br> Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid.</p>
                </div>
            </div>
        </div>
        <div x-show="tab == 'navpills2-3'" 
        x-transition:enter="transition-all duration-700 easy-in-out"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100">
            <div class="row">
                <div> 
                    <p class="mb-4 sm:text-sm">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>
                    <p class="mb-4 sm:text-sm">
                        <br> Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid.</p>
                </div>
            </div>
        </div>
    </div>
</div>
														
													

														
<div class="sm:p-7.5 p-4" x-data="{ tab: 'v-pills-home' }">
    <div class="row">
        <div class="sm:w-1/3">
            <div class="nav flex flex-wrap flex-col nav-pills mb-3">
                <a href="javascript:void(0);" class="py-2.5 px-3.6 text-primary block rounded-lg duration-500"
                @click.prevent="tab = 'v-pills-home'"
                :class="{ 'bg-primary text-white': tab == 'v-pills-home'}">Home</a>
                <a href="javascript:void(0);" class="py-2.5 px-3.6 text-primary block rounded-lg duration-500"
                @click.prevent="tab = 'v-pills-profile'"
                :class="{ 'bg-primary text-white': tab == 'v-pills-profile'}">Profile</a>
                <a href="javascript:void(0);" class="py-2.5 px-3.6 text-primary block rounded-lg duration-500"
                @click.prevent="tab = 'v-pills-messages'"
                :class="{ 'bg-primary text-white': tab == 'v-pills-messages'}">Messages</a> 
                <a href="javascript:void(0);" class="py-2.5 px-3.6 text-primary block rounded-lg duration-500"
                @click.prevent="tab = 'v-pills-settings'"
                :class="{ 'bg-primary text-white': tab == 'v-pills-settings'}">Settings</a>
            </div>
        </div>
        <div class="sm:w-2/3">
            <div class="tab-content-area">
                <div x-show="tab == 'v-pills-home'" 
                x-transition:enter="transition-all duration-700 easy-in-out"
                x-transition:enter-start="opacity-0"
                  x-transition:enter-end="opacity-100">
                    <p class="mb-4 sm:text-sm">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 x-show="tab == 'v-pills-profile'" 
                x-transition:enter="transition-all duration-700 easy-in-out"
                x-transition:enter-start="opacity-0"
                  x-transition:enter-end="opacity-100">
                    <p class="mb-4 sm:text-sm">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 x-show="tab == 'v-pills-messages'" 
                x-transition:enter="transition-all duration-700 easy-in-out"
                x-transition:enter-start="opacity-0"
                  x-transition:enter-end="opacity-100">
                    <p class="mb-4 sm:text-sm">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 x-show="tab == 'v-pills-settings'" 
                x-transition:enter="transition-all duration-700 easy-in-out"
                x-transition:enter-start="opacity-0"
                  x-transition:enter-end="opacity-100">
                    <p class="mb-4 sm:text-sm">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>
</div>
														
													

														
<div class="sm:p-7.5 p-4" x-data="{ tab: 'v-pills-home1' }">
    <div class="row">
        <div class="sm:w-2/3">
            <div class="tab-content-area">
                <div x-show="tab == 'v-pills-home1'" 
                x-transition:enter="transition-all duration-700 easy-in-out"
                x-transition:enter-start="opacity-0"
                  x-transition:enter-end="opacity-100">
                    <p class="mb-4 sm:text-sm">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 x-show="tab == 'v-pills-profile1'" 
                x-transition:enter="transition-all duration-700 easy-in-out"
                x-transition:enter-start="opacity-0"
                  x-transition:enter-end="opacity-100">
                    <p class="mb-4 sm:text-sm">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 x-show="tab == 'v-pills-messages1'" 
                x-transition:enter="transition-all duration-700 easy-in-out"
                x-transition:enter-start="opacity-0"
                  x-transition:enter-end="opacity-100">
                    <p class="mb-4 sm:text-sm">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 x-show="tab == 'v-pills-settings1'" 
                x-transition:enter="transition-all duration-700 easy-in-out"
                x-transition:enter-start="opacity-0"
                  x-transition:enter-end="opacity-100">
                    <p class="mb-4 sm:text-sm">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);" class="py-2.5 px-3.6 text-primary block rounded-lg duration-500"
                @click.prevent="tab = 'v-pills-home1'"
                :class="{ 'bg-primary text-white': tab == 'v-pills-home1'}">Home</a>
                <a href="javascript:void(0);" class="py-2.5 px-3.6 text-primary block rounded-lg duration-500"
                @click.prevent="tab = 'v-pills-profile1'"
                :class="{ 'bg-primary text-white': tab == 'v-pills-profile1'}">Profile</a>
                <a href="javascript:void(0);" class="py-2.5 px-3.6 text-primary block rounded-lg duration-500"
                @click.prevent="tab = 'v-pills-messages1'"
                :class="{ 'bg-primary text-white': tab == 'v-pills-messages1'}">Messages</a>
                <a href="javascript:void(0);" class="py-2.5 px-3.6 text-primary block rounded-lg duration-500"
                @click.prevent="tab = 'v-pills-settings1'"
                :class="{ 'bg-primary text-white': tab == 'v-pills-settings1'}">Settings</a>
            </div>
        </div>
    </div>
</div>
														
													

														
<div class="sm:p-7.5 p-4" x-data="{ tab: 'tab-home8' }">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs flex flex-wrap border-b border-border boder-tabs" role="tablist">
        <li class="nav-item">
            <a href="javascript:void(0);" class="py-2 px-4 font-medium block -mb-0.5 border border-transparent rounded-t-lg text-primary duration-500" 
            @click.prevent="tab = 'tab-home8'"
            :class="{ ' border-t-border border-x-border bg-bodybg text-secondary': tab == 'tab-home8'}">
                <span>
                    <i class="ti-home"></i>
                </span>
            </a>
        </li>
        <li class="nav-item">
            <a href="javascript:void(0);" class="py-2 px-4 font-medium block -mb-0.5 border border-transparent rounded-t-lg text-primary duration-500" 
            @click.prevent="tab = 'tab-profile8'"
            :class="{ ' border-t-border border-x-border bg-bodybg text-secondary': tab == 'tab-profile8'}">
                <span>
                    <i class="ti-user"></i>
                </span>
            </a>
        </li>
        <li class="nav-item">
            <a href="javascript:void(0);" class="py-2 px-4 font-medium block -mb-0.5 border border-transparent rounded-t-lg text-primary duration-500" 
            @click.prevent="tab = 'tab-messages8'"
            :class="{ ' border-t-border border-x-border bg-bodybg text-secondary': tab == 'tab-messages8'}">
                <span>
                    <i class="ti-email"></i>
                </span>
            </a>
        </li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content-area">
        <div x-show="tab == 'tab-home8'"
        x-transition:enter="transition-all duration-700 easy-in-out"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100">
            <div class="pt-6">
                <h4 class="mb-2 ">This is icon title 1</h4>
                <p class="mb-4 sm:text-sm">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 sm:text-sm">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 x-show="tab == 'tab-profile8'"
        x-transition:enter="transition-all duration-700 easy-in-out"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100">
            <div class="pt-6">
                <h4 class="mb-2 ">This is icon title 2</h4>
                <p class="mb-4 sm:text-sm">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 sm:text-sm">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 x-show="tab == 'tab-messages8'"
        x-transition:enter="transition-all duration-700 easy-in-out"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100">
            <div class="pt-6">
                <h4 class="mb-2 ">This is icon title 3</h4>
                <p class="mb-4 sm:text-sm">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 sm:text-sm">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>