<!-- horizontal -->
<div class="relative inline-flex align-middle">
<button type="button" class="btn btn-dark ltr:rounded-r-none rtl:rounded-l-none">Left</button>
<button type="button" class="btn btn-dark rounded-none">Middle</button>
<button type="button" class="btn btn-dark ltr:rounded-l-none rtl:rounded-r-none">Right</button>
</div>
<!-- button group -->
<div class="relative inline-flex align-middle">
<button type="button" class="btn btn-dark ltr:rounded-r-none rtl:rounded-l-none">1</button>
<button type="button" class="btn btn-dark rounded-none">2</button>
<button type="button" class="btn btn-dark rounded-none">3</button>
<button type="button" class="btn btn-dark ltr:rounded-l-none rtl:rounded-r-none">4</button>
</div>
<!-- input group -->
<div class="flex relative items-stretch flex-wrap">
<div class="ltr:-mr-px rtl:-ml-px flex">
<span class="border border-[#e0e6ed] dark:border-[#17263c] ltr:rounded-l rtl:rounded-r bg-[#f1f2f3] flex items-center justify-center text-black px-4 py-1.5 dark:bg-[#1a1c2d] dark:text-white-dark">@</span>
</div>
<input type="text" placeholder="Input group example" class="flex-1 form-input rounded-tl-none rounded-bl-none" />
</div>
<!-- vertical -->
<div class="relative inline-flex align-middle flex-col items-start justify-center">
<button type="button" class="btn btn-dark rounded-b-none w-full">Button</button>
<div class="relative">
<div x-data="dropdown" @click.outside="open = false" class="dropdown">
<button type="button" class="btn dropdown-toggle btn-dark rounded-none" @click="toggle">
Dropdown
<svg> ... </svg>
</button>
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:right-0 rtl:left-0 whitespace-nowrap">
<li><a href="javascript:;" @click="toggle">Dropdown link</a></li>
<li><a href="javascript:;" @click="toggle">Dropdown link</a></li>
</ul>
</div>
</div>
<button type=" button" class="btn btn-dark rounded-none w-full">Button</button>
<button type="button" class="btn btn-dark rounded-none w-full">Button</button>
<div class="relative">
<div x-data="dropdown" @click.outside="open = false" class="dropdown">
<button type="button" class="btn dropdown-toggle btn-dark rounded-t-none" @click="toggle">
Dropdown
<svg> ... </svg>
</button>
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:right-0 rtl:left-0 bottom-full whitespace-nowrap">
<li><a href="javascript:;" @click="toggle">Dropdown link</a></li>
<li><a href="javascript:;" @click="toggle">Dropdown link</a></li>
</ul>
</div>
</div>
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("dropdown", (initialOpenState = false) => ({
open: initialOpenState,
toggle() {
this.open = !this.open;
},
}));
});
</script>