<div class="btn-group relative inline-flex align-middle rounded-lg">
	<button type="button" class="btn bg-primary  hover:bg-primaryhover hover:shadow-btnprimary focus:bg-primaryhover focus:shadow-btnprimary text-white">Left</button>
	<button type="button" class="btn bg-primary  hover:bg-primaryhover hover:shadow-btnprimary focus:bg-primaryhover focus:shadow-btnprimary text-white">Middle</button>
	<button type="button" class="btn bg-primary  hover:bg-primaryhover hover:shadow-btnprimary focus:bg-primaryhover focus:shadow-btnprimary text-white">Right</button>
</div>
														
													

														
<div class="btn-group relative inline-flex align-middle rounded-lg">
	<button type="button" class="btn bg-danger  hover:bg-dangerhover hover:shadow-btndanger focus:bg-dangerhover focus:shadow-btndanger text-white">Left</button>
	<button type="button" class="btn bg-warning  hover:bg-warninghover hover:shadow-btnwarning focus:bg-warninghover focus:shadow-btnwarning text-white">Middle</button>
	<button type="button" class="btn bg-success  hover:bg-successhover hover:shadow-btnsuccess focus:bg-successhover focus:shadow-btnsuccess text-white">Right</button>
</div>
														
													

														
<div class="btn-group relative inline-flex align-middle rounded-lg">
	<button type="button" class="btn border border-primary first:border-r-0 last:border-l-0 text-primary hover:bg-primaryhover hover:shadow-btnprimary hover:text-white">Left</button>
	<button type="button" class="btn border border-primary first:border-r-0 last:border-l-0 text-primary hover:bg-primaryhover hover:shadow-btnprimary hover:text-white">Middle</button>
	<button type="button" class="btn border border-primary first:border-r-0 last:border-l-0 text-primary hover:bg-primaryhover hover:shadow-btnprimary hover:text-white">Right</button>
</div>
														
													

														
<div class="btn-group relative inline-flex align-middle rounded-lg">
	<input type="checkbox" class="btn-check" id="btncheck1">
	<label class="btn border border-primary !rounded-s-lg border-r-0 last:border-l-0 text-primary btn-outline-primary" for="btncheck1">Checkbox 1</label>
  
	<input type="checkbox" class="btn-check" id="btncheck2">
	<label class="btn border border-primary last:border-l-0 text-primary btn-outline-primary" for="btncheck2">Checkbox 2</label>
  
	<input type="checkbox" class="btn-check" id="btncheck3">
	<label class="btn border border-primary last:border-l-0 text-primary btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>
														
													

														
<div class="btn-group relative inline-flex align-middle rounded-lg">
	<input type="radio" class="btn-check" name="btnradio" id="btnradio1" checked>
	<label class="btn border border-primary !rounded-s-lg border-r-0 last:border-l-0 text-primary btn-outline-primary" for="btnradio1">Radio 1</label>
  
	<input type="radio" class="btn-check" name="btnradio" id="btnradio2">
	<label class="btn border border-primary last:border-l-0 text-primary btn-outline-primary" for="btnradio2">Radio 2</label>
  
	<input type="radio" class="btn-check" name="btnradio" id="btnradio3">
	<label class="btn border border-primary last:border-l-0 text-primary btn-outline-primary" for="btnradio3">Radio 3</label>
</div>
														
													

														
<div class="btn-group relative inline-flex align-middle rounded-lg me-2 mb-2">
	<button type="button" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white">1</button>
	<button type="button" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white">2</button>
	<button type="button" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white">3</button>
	<button type="button" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white">4</button>
</div>
<div class="btn-group relative inline-flex align-middle rounded-lg me-2 mb-2">
	<button type="button" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white">5</button>
	<button type="button" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white">6</button>
	<button type="button" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white">7</button>
</div>
<div class="btn-group relative inline-flex align-middle rounded-lg mb-2">
	<button type="button" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white !rounded-lg">8</button>
</div>
														
													

														
<div class="btn-group relative inline-flex align-middle rounded-lg mb-2 btn-group-lg">
	<button class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white" type="button">Left</button>
	<button class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white" type="button">Middle</button>
	<button class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white" type="button">Right</button>
</div>
<div class="btn-group relative inline-flex align-middle rounded-lg mb-2">
	<button class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white" type="button">Left</button>
	<button class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white" type="button">Middle</button>
	<button class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white" type="button">Right</button>
</div>
<div class="btn-group relative inline-flex align-middle rounded-lg mb-2 btn-group-sm">
	<button class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white" type="button">Left</button>
	<button class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white" type="button">Middle</button>
	<button class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white" type="button">Right</button>
</div>
														
													

														
<div class="btn-group relative inline-flex align-middle rounded-lg">
	<button type="button" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white">1</button>
	<button type="button" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white">2</button>
	<div class="btn-group relative inline-flex align-middle rounded-lg" x-data="{ open: false }">
		<button type="button" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white !rounded-s-none !rounded-e-lg dropdown-toggle" @click="open = true">Dropdown</button>
		<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
		x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
			<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" href="javascript:void(0);" @click="open = false">Dropdown link</a>
			<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" href="javascript:void(0);" @click="open = false">Dropdown link</a>
		</div>
	</div>
</div>
														
													

														
<div class="relative inline-flex flex-col items-start justify-center btn-group-vertical">
	<button class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white" type="button">Button</button>
	<button class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white" type="button">Button</button>
	<button class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white" type="button">Button</button>
	<button class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white" type="button">Button</button>
	<button class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white" type="button">Button</button>
	<button class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white" type="button">Button</button>
</div>
														
													

														
<div role="group" class="relative inline-flex flex-col items-start justify-center btn-group-vertical">
<button class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white w-full" type="button">Button</button>
<button class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white w-full" type="button">Button</button>
<div role="group" class="btn-group relative inline-flex align-middle rounded-lg" x-data="{ open: false }">
	<button @click="open = true" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white w-full !rounded-none dropdown-toggle" type="button">Dropdown</button>
	<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
		x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
		<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" href="javascript:void(0);" @click="open = false">Dropdown link</a>
		<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" href="javascript:void(0);" @click="open = false">Dropdown link</a>
	</div>
</div>
<button class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white w-full" type="button">Button</button>
<button class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white w-full" type="button">Button</button>
<div role="group" class="btn-group relative inline-flex align-middle rounded-lg" x-data="{ open: false }">
	<button @click="open = true" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white w-full !rounded-none dropdown-toggle" type="button">Dropdown</button>
	<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
		x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
		<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" href="javascript:void(0);" @click="open = false">Dropdown link</a>
		<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" href="javascript:void(0);" @click="open = false">Dropdown link</a>
	</div>
</div>
<div role="group" class="btn-group relative inline-flex align-middle rounded-lg" x-data="{ open: false }">
	<button @click="open = true" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white w-full !rounded-none dropdown-toggle" type="button">Dropdown</button>
	<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
		x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
		<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" href="javascript:void(0);" @click="open = false">Dropdown link</a>
		<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" href="javascript:void(0);" @click="open = false">Dropdown link</a>
	</div>
</div>
<div role="group" class="btn-group relative inline-flex align-middle rounded-lg" x-data="{ open: false }">
	<button @click="open = true" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white w-full !rounded-t-none !rounded-b-lg dropdown-toggle" type="button">Dropdown</button>
	<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
		x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
		<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" href="javascript:void(0);" @click="open = false">Dropdown link</a>
		<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" href="javascript:void(0);" @click="open = false">Dropdown link</a>
	</div>
</div>
</div>