Buttons Group

Copy
 
<div class="inline-flex">
	<button type="button" class="btn inline-flex text-sm font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-dark hover:text-white">
		Button
	</button>
	<button type="button" class="btn inline-flex text-sm font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-dark hover:text-white">
		Button
	</button>
	<button type="button" class="btn inline-flex text-sm font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-dark hover:text-white">
		Button
	</button>
</div>

Copy
 
<div class="inline-flex">
	<button type="button" class="btn inline-flex items-center justify-center text-sm font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-dark hover:text-white">
		<i class="icon icon-chevron-left"></i>
	</button> 
	<button type="button" class="btn inline-flex items-center justify-center text-sm font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-dark hover:text-white">
		<i class="icon icon-chevron-right"></i>
	</button>
</div>

Copy
 
<div class="inline-flex">
	<button type="button" class="btn inline-flex items-center justify-center text-sm font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-gray-900">
		<i class="icon icon-file me-1"></i> Invoices
	</button>
	</button>
	<button type="button" class="btn text-sm font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-gray-900">
		10
	</button>
</div>

Copy
 
<div class="inline-flex"> 
	<div class="hs-dropdown [--placement:bottom-right] [--auto-close:inside] relative inline-flex">
		<div class="inline-flex">
			<button type="button" class="btn inline-flex items-center justify-center text-sm font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark">
				Save Changes
			</button> 
			<button type="button" class="hs-dropdown-toggle cursor-pointer py-1.75 px-2 inline-flex items-center gap-x-2 text-sm font-normal first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-gray-800 focus:outline-hidden focus:white" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
				<i class="icon-chevron-down"></i>
			</button>
		</div>  
		<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-50 bg-white border border-border-color shadow rounded-lg mt-2 z-1" role="menu" aria-orientation="vertical">
			<div class="p-2 space-y-1">
				<a class="flex items-center px-4 py-1.75 rounded-lg text-gray-900 hover:text-primary hover:bg-light focus:outline-hidden focus:bg-white" href="#">
					Action
				</a>
				<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-gray-900 hover:text-primary hover:bg-light focus:outline-hidden focus:bg-white" href="#">
					Another Action
				</a>
				<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-gray-900 hover:text-primary hover:bg-light focus:outline-hidden focus:bg-white" href="#">
					Other Action
				</a>
				<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-gray-900 hover:text-primary hover:bg-light focus:outline-hidden focus:bg-white" href="#">
					Seperate Action
				</a>
			</div>
		</div>
	</div> 
</div>