- Forms
- Wizards
Pills
Text Only
Code<!-- basic -->
<div class="mb-5" x-data="{ activeTab: 1}">
<div class="inline-block w-full">
<ul class="mb-5 grid grid-cols-3 text-center">
<li>
<a href="javascript:;" class="bg-[#f3f2ee] dark:bg-[#1b2e4b] p-2.5 block rounded-full" :class="{'!bg-primary text-white': activeTab === 1}" @click="activeTab = 1">1 Home</a>
</li>
<li>
<a href="javascript:;" class="bg-[#f3f2ee] dark:bg-[#1b2e4b] p-2.5 block rounded-full" :class="{'!bg-primary text-white': activeTab === 2}" @click="activeTab = 2">2 About</a>
</li>
<li>
<a href="javascript:;" class="bg-[#f3f2ee] dark:bg-[#1b2e4b] p-2.5 block rounded-full" :class="{'!bg-primary text-white': activeTab === 3}" @click="activeTab = 3">3 Success</a>
</li>
</ul>
<div>
<template x-if="activeTab === 1">
<p class="mb-5">Try the keyboard navigation by clicking arrow left or right!</p>
</template>
<template x-if="activeTab === 2">
<p class="mb-5">The next and previous buttons help you to navigate through your content.</p>
</template>
<template x-if="activeTab === 3">
<p class="mb-5">Wonderful transition effects.</p>
</template>
</div>
<div class="flex justify-between">
<button type="button" class="btn btn-primary" :disabled="activeTab === 1" @click="activeTab--">Back</button>
<button type="button" class="btn btn-primary" :disabled="activeTab === 3" @click="activeTab++">Next</button>
</div>
</div>
</div>
Icon Only
Code<!-- icon only -->
<div class="mb-5" x-data="{ activeTab: 1}">
<div class="inline-block w-full">
<ul class="mb-5 grid grid-cols-3">
<li>
<a href="javascript:;" class="bg-[#f3f2ee] dark:bg-[#1b2e4b] flex justify-center items-center p-2.5 rounded-full" :class="{'!bg-primary text-white': activeTab === 1}" @click="activeTab = 1">
<svg> ... </svg>
</a>
</li>
<li>
<a href="javascript:;" class="bg-[#f3f2ee] dark:bg-[#1b2e4b] flex justify-center items-center p-2.5 rounded-full" :class="{'!bg-primary text-white': activeTab === 2}" @click="activeTab = 2">
<svg> ... </svg>
</a>
</li>
<li>
<a href="javascript:;" class="bg-[#f3f2ee] dark:bg-[#1b2e4b] flex justify-center items-center p-2.5 rounded-full" :class="{'!bg-primary text-white': activeTab === 3}" @click="activeTab = 3">
<svg> ... </svg>
</a>
</li>
</ul>
<div>
<template x-if="activeTab === 1">
<p class="mb-5">Try the keyboard navigation by clicking arrow left or right!</p>
</template>
<template x-if="activeTab === 2">
<p class="mb-5">The next and previous buttons help you to navigate through your content.</p>
</template>
<template x-if="activeTab === 3">
<p class="mb-5">Wonderful transition effects.</p>
</template>
</div>
<div class="flex justify-between">
<button type="button" class="btn btn-primary" :disabled="activeTab === 1" @click="activeTab--">Back</button>
<button type="button" class="btn btn-primary" :disabled="activeTab === 3" @click="activeTab++">Next</button>
</div>
</div>
</div>
Text & Icon
Code<!-- text & icon -->
<div class="mb-5" x-data="{ activeTab: 1}">
<div class="inline-block w-full">
<ul class="mb-5 grid grid-cols-3">
<li>
<a href="javascript:;" :class="{'text-primary': activeTab === 1}" @click="activeTab = 1">
<div class="bg-[#f3f2ee] dark:bg-[#1b2e4b] flex justify-center items-center p-2.5 rounded-full" :class="{'!bg-primary text-white': activeTab === 1}" @click="activeTab = 1">
<svg> ... </svg>
</div>
<span class="text-center block mt-2">Home</span>
</a>
</li>
<li>
<a href="javascript:;" :class="{'text-primary': activeTab === 2}" @click="activeTab = 2">
<div class="bg-[#f3f2ee] dark:bg-[#1b2e4b] flex justify-center items-center p-2.5 rounded-full" :class="{'!bg-primary text-white': activeTab === 2}" @click="activeTab = 2">
<svg> ... </svg>
</div>
<span class="text-center block mt-2">About</span>
</a>
</li>
<li>
<a href="javascript:;" :class="{'text-primary': activeTab === 3}" @click="activeTab = 3">
<div class="bg-[#f3f2ee] dark:bg-[#1b2e4b] flex justify-center items-center p-2.5 rounded-full" :class="{'!bg-primary text-white': activeTab === 3}" @click="activeTab = 3">
<svg> ... </svg>
</div>
<span class="text-center block mt-2">Success</span>
</a>
</li>
</ul>
<div>
<template x-if="activeTab === 1">
<p class="mb-5">Try the keyboard navigation by clicking arrow left or right!</p>
</template>
<template x-if="activeTab === 2">
<p class="mb-5">The next and previous buttons help you to navigate through your content.</p>
</template>
<template x-if="activeTab === 3">
<p class="mb-5">Wonderful transition effects.</p>
</template>
</div>
<div class="flex justify-between">
<button type="button" class="btn btn-primary" :disabled="activeTab === 1" @click="activeTab--">Back</button>
<button type="button" class="btn btn-primary" :disabled="activeTab === 3" @click="activeTab++">Next</button>
</div>
</div>
</div>
Circle
Icon Only
Code<!-- icon only -->
<div class="mb-5" x-data="{ activeTab: 1}">
<div class="inline-block w-full">
<div class="relative z-[1]">
<div class="bg-primary w-[15%] h-1 absolute ltr:left-0 rtl:right-0 top-[30px] m-auto -z-[1] transition-[width]" :class="{'w-[15%]' : activeTab === 1, 'w-[48%]' : activeTab === 2, 'w-[81%]' : activeTab === 3}"></div>
<ul class="mb-5 grid grid-cols-3">
<li class="mx-auto">
<a href="javascript:;" class="bg-white dark:bg-[#253b5c] border-[3px] border-[#f3f2ee] dark:border-[#1b2e4b] flex justify-center items-center w-16 h-16 rounded-full" :class="{'!border-primary !bg-primary text-white': activeTab === 1}" @click="activeTab = 1">
<svg> ... </svg>
</a>
</li>
<li class="mx-auto">
<a href="javascript:;" class="bg-white dark:bg-[#253b5c] border-[3px] border-[#f3f2ee] dark:border-[#1b2e4b] flex justify-center items-center w-16 h-16 rounded-full" :class="{'!border-primary !bg-primary text-white': activeTab === 2}" @click="activeTab = 2">
<svg> ... </svg>
</a>
</li>
<li class="mx-auto">
<a href="javascript:;" class="bg-white dark:bg-[#253b5c] border-[3px] border-[#f3f2ee] dark:border-[#1b2e4b] flex justify-center items-center w-16 h-16 rounded-full" :class="{'!border-primary !bg-primary text-white': activeTab === 3}" @click="activeTab = 3">
<svg> ... </svg>
</a>
</li>
</ul>
</div>
<div>
<template x-if="activeTab === 1">
<p class="mb-5">Try the keyboard navigation by clicking arrow left or right!</p>
</template>
<template x-if="activeTab === 2">
<p class="mb-5">The next and previous buttons help you to navigate through your content.</p>
</template>
<template x-if="activeTab === 3">
<p class="mb-5">Wonderful transition effects.</p>
</template>
</div>
<div class="flex justify-between">
<button type="button" class="btn btn-primary" :disabled="activeTab === 1" @click="activeTab--">Back</button>
<button type="button" class="btn btn-primary" :disabled="activeTab === 3" @click="activeTab++">Next</button>
</div>
</div>
</div>
Text & Icon
Code<!-- basic -->
<div class="mb-5" x-data="{ activeTab: 1}">
<div class="inline-block w-full">
<div class="relative z-[1]">
<div class="bg-primary w-[15%] h-1 absolute ltr:left-0 rtl:right-0 top-[30px] m-auto -z-[1] transition-[width]" :class="{'w-[15%]' : activeTab === 1, 'w-[48%]' : activeTab === 2, 'w-[81%]' : activeTab === 3}"></div>
<ul class="mb-5 grid grid-cols-3">
<li class="mx-auto">
<a href="javascript:;" class="border-[3px] border-[#f3f2ee] bg-white dark:bg-[#253b5c] dark:border-[#1b2e4b] flex justify-center items-center w-16 h-16 rounded-full" :class="{'!border-primary !bg-primary text-white': activeTab === 1}" @click="activeTab = 1">
<svg> ... </svg>
</a>
<span class="text-center block mt-2" :class="{'text-primary' : activeTab === 1}">Home</span>
</li>
<li class="mx-auto">
<a href="javascript:;" class="border-[3px] border-[#f3f2ee] bg-white dark:bg-[#253b5c] dark:border-[#1b2e4b] flex justify-center items-center w-16 h-16 rounded-full" :class="{'!border-primary !bg-primary text-white': activeTab === 2}" @click="activeTab = 2">
<svg> ... </svg>
</a>
<span class="text-center block mt-2" :class="{'text-primary' : activeTab === 2}">About</span>
</li>
<li class="mx-auto">
<a href="javascript:;" class="border-[3px] border-[#f3f2ee] bg-white dark:bg-[#253b5c] dark:border-[#1b2e4b] flex justify-center items-center w-16 h-16 rounded-full" :class="{'!border-primary !bg-primary text-white': activeTab === 3}" @click="activeTab = 3">
<svg> ... </svg>
</a>
<span class="text-center block mt-2" :class="{'text-primary' : activeTab === 3}">Success</span>
</li>
</ul>
</div>
<div>
<template x-if="activeTab === 1">
<p class="mb-5">Try the keyboard navigation by clicking arrow left or right!</p>
</template>
<template x-if="activeTab === 2">
<p class="mb-5">The next and previous buttons help you to navigate through your content.</p>
</template>
<template x-if="activeTab === 3">
<p class="mb-5">Wonderful transition effects.</p>
</template>
</div>
<div class="flex justify-between">
<button type="button" class="btn btn-primary" :disabled="activeTab === 1" @click="activeTab--">Back</button>
<button type="button" class="btn btn-primary" :disabled="activeTab === 3" @click="activeTab++">Next</button>
</div>
</div>
</div>
Square
Icon Only
Code<!-- square -->
<div class="mb-5" x-data="{ activeTab: 1}">
<div class="inline-block w-full">
<div class="relative z-[1]">
<div class="bg-primary w-[15%] h-1 absolute ltr:left-0 rtl:right-0 top-[30px] m-auto -z-[1] transition-[width]" :class="{'w-[15%]' : activeTab === 1, 'w-[48%]' : activeTab === 2, 'w-[81%]' : activeTab === 3}"></div>
<ul class="mb-5 grid grid-cols-3">
<li class="mx-auto">
<a href="javascript:;" class="bg-white dark:bg-[#253b5c] border-[3px] border-[#f3f2ee] dark:border-[#1b2e4b] flex justify-center items-center w-16 h-16" :class="{'!border-primary !bg-primary text-white': activeTab === 1}" @click="activeTab = 1">
<svg> ... </svg>
</a>
</li>
<li class="mx-auto">
<a href="javascript:;" class="bg-white dark:bg-[#253b5c] border-[3px] border-[#f3f2ee] dark:border-[#1b2e4b] flex justify-center items-center w-16 h-16" :class="{'!border-primary !bg-primary text-white': activeTab === 2}" @click="activeTab = 2">
<svg> ... </svg>
</a>
</li>
<li class="mx-auto">
<a href="javascript:;" class="bg-white dark:bg-[#253b5c] border-[3px] border-[#f3f2ee] dark:border-[#1b2e4b] flex justify-center items-center w-16 h-16" :class="{'!border-primary !bg-primary text-white': activeTab === 3}" @click="activeTab = 3">
<svg> ... </svg>
</a>
</li>
</ul>
</div>
<div>
<template x-if="activeTab === 1">
<p class="mb-5">Try the keyboard navigation by clicking arrow left or right!</p>
</template>
<template x-if="activeTab === 2">
<p class="mb-5">The next and previous buttons help you to navigate through your content.</p>
</template>
<template x-if="activeTab === 3">
<p class="mb-5">Wonderful transition effects.</p>
</template>
</div>
<div class="flex justify-between">
<button type="button" class="btn btn-primary" :disabled="activeTab === 1" @click="activeTab--">Back</button>
<button type="button" class="btn btn-primary" :disabled="activeTab === 3" @click="activeTab++">Next</button>
</div>
</div>
</div>
Text & Icon
Code<!-- text & icon -->
<div class="mb-5" x-data="{ activeTab: 1}">
<div class="inline-block w-full">
<div class="relative z-[1]">
<div class="bg-primary w-[15%] h-1 absolute ltr:left-0 rtl:right-0 top-[30px] m-auto -z-[1] transition-[width]" :class="{'w-[15%]' : activeTab === 1, 'w-[48%]' : activeTab === 2, 'w-[81%]' : activeTab === 3}"></div>
<ul class="mb-5 grid grid-cols-3">
<li class="mx-auto">
<a href="javascript:;" class="border-[3px] border-[#f3f2ee] bg-white dark:bg-[#253b5c] dark:border-[#1b2e4b] flex justify-center items-center w-16 h-16" :class="{'!border-primary !bg-primary text-white': activeTab === 1}" @click="activeTab = 1">
<svg> ... </svg>
</a>
<span class="text-center block mt-2" :class="{'text-primary' : activeTab === 1}">Home</span>
</li>
<li class="mx-auto">
<a href="javascript:;" class="border-[3px] border-[#f3f2ee] bg-white dark:bg-[#253b5c] dark:border-[#1b2e4b] flex justify-center items-center w-16 h-16" :class="{'!border-primary !bg-primary text-white': activeTab === 2}" @click="activeTab = 2">
<svg> ... </svg>
</a>
<span class="text-center block mt-2" :class="{'text-primary' : activeTab === 2}">About</span>
</li>
<li class="mx-auto">
<a href="javascript:;" class="border-[3px] border-[#f3f2ee] bg-white dark:bg-[#253b5c] dark:border-[#1b2e4b] flex justify-center items-center w-16 h-16" :class="{'!border-primary !bg-primary text-white': activeTab === 3}" @click="activeTab = 3">
<svg> ... </svg>
</a>
<span class="text-center block mt-2" :class="{'text-primary' : activeTab === 3}">Success</span>
</li>
</ul>
</div>
<div>
<template x-if="activeTab === 1">
<p class="mb-5">Try the keyboard navigation by clicking arrow left or right!</p>
</template>
<template x-if="activeTab === 2">
<p class="mb-5">The next and previous buttons help you to navigate through your content.</p>
</template>
<template x-if="activeTab === 3">
<p class="mb-5">Wonderful transition effects.</p>
</template>
</div>
<div class="flex justify-between">
<button type="button" class="btn btn-primary" :disabled="activeTab === 1" @click="activeTab--">Back</button>
<button type="button" class="btn btn-primary" :disabled="activeTab === 3" @click="activeTab++">Next</button>
</div>
</div>
</div>
© . Vristo All rights reserved.