<div class="space-y-8">
    <!-- Bottom placement with different alignments -->
    <div>
        <h3 class="text-lg font-semibold mb-4">Bottom Placement</h3>
        <div class="flex gap-4 flex-wrap">
            <c-lb.dropdown alignment="start">
                <c-lb.dropdown.trigger class="btn m-1">Bottom Start</c-lb.dropdown.trigger>
                <c-lb.dropdown.content class="bg-base-100 rounded-box w-52 p-2 shadow-sm">
                    <c-lb.menu class="w-full">
                        <c-lb.menu.item>Item 1</c-lb.menu.item>
                        <c-lb.menu.item>Item 2</c-lb.menu.item>
                    </c-lb.menu>
                </c-lb.dropdown.content>
            </c-lb.dropdown>

            <c-lb.dropdown alignment="center">
                <c-lb.dropdown.trigger class="btn m-1">Bottom Center</c-lb.dropdown.trigger>
                <c-lb.dropdown.content class="bg-base-100 rounded-box w-52 p-2 shadow-sm">
                    <c-lb.menu class="w-full">
                        <c-lb.menu.item >Item 1</c-lb.menu.item>
                        <c-lb.menu.item >Item 2</c-lb.menu.item>
                    </c-lb.menu>
                </c-lb.dropdown.content>
            </c-lb.dropdown>

            <c-lb.dropdown alignment="end">
                <c-lb.dropdown.trigger class="btn m-1">Bottom End</c-lb.dropdown.trigger>
                <c-lb.dropdown.content class="bg-base-100 rounded-box w-52 p-2 shadow-sm">
                    <c-lb.menu class="w-full">
                        <c-lb.menu.item >Item 1</c-lb.menu.item>
                        <c-lb.menu.item >Item 2</c-lb.menu.item>
                    </c-lb.menu>
                </c-lb.dropdown.content>
            </c-lb.dropdown>
        </div>
    </div>

    <!-- Top placement with different alignments -->
    <div>
        <h3 class="text-lg font-semibold mb-4">Top Placement</h3>
        <div class="flex gap-4 flex-wrap">
            <c-lb.dropdown placement="top" alignment="start">
                <c-lb.dropdown.trigger class="btn m-1">Top Start</c-lb.dropdown.trigger>
                <c-lb.dropdown.content class="bg-base-100 rounded-box w-52 p-2 shadow-sm">
                    <c-lb.menu class="w-full">
                        <c-lb.menu.item >Item 1</c-lb.menu.item>
                        <c-lb.menu.item >Item 2</c-lb.menu.item>
                    </c-lb.menu>
                </c-lb.dropdown.content>
            </c-lb.dropdown>

            <c-lb.dropdown placement="top" alignment="center">
                <c-lb.dropdown.trigger class="btn m-1">Top Center</c-lb.dropdown.trigger>
                <c-lb.dropdown.content class="bg-base-100 rounded-box w-52 p-2 shadow-sm">
                    <c-lb.menu class="w-full">
                        <c-lb.menu.item >Item 1</c-lb.menu.item>
                        <c-lb.menu.item >Item 2</c-lb.menu.item>
                    </c-lb.menu>
                </c-lb.dropdown.content>
            </c-lb.dropdown>

            <c-lb.dropdown placement="top" alignment="end">
                <c-lb.dropdown.trigger class="btn m-1">Top End</c-lb.dropdown.trigger>
                <c-lb.dropdown.content class="bg-base-100 rounded-box w-52 p-2 shadow-sm">
                    <c-lb.menu class="w-full">
                        <c-lb.menu.item >Item 1</c-lb.menu.item>
                        <c-lb.menu.item >Item 2</c-lb.menu.item>
                    </c-lb.menu>
                </c-lb.dropdown.content>
            </c-lb.dropdown>
        </div>
    </div>

    <!-- Left placement with different alignments -->
    <div>
        <h3 class="text-lg font-semibold mb-4">Left Placement</h3>
        <div class="flex gap-4 flex-wrap">
            <c-lb.dropdown placement="left" alignment="start">
                <c-lb.dropdown.trigger class="btn m-1">Left Start</c-lb.dropdown.trigger>
                <c-lb.dropdown.content class="bg-base-100 rounded-box w-52 p-2 shadow-sm">
                    <c-lb.menu class="w-full">
                        <c-lb.menu.item >Item 1</c-lb.menu.item>
                        <c-lb.menu.item >Item 2</c-lb.menu.item>
                    </c-lb.menu>
                </c-lb.dropdown.content>
            </c-lb.dropdown>

            <c-lb.dropdown placement="left" alignment="center">
                <c-lb.dropdown.trigger class="btn m-1">Left Center</c-lb.dropdown.trigger>
                <c-lb.dropdown.content class="bg-base-100 rounded-box w-52 p-2 shadow-sm">
                    <c-lb.menu class="w-full">
                        <c-lb.menu.item >Item 1</c-lb.menu.item>
                        <c-lb.menu.item >Item 2</c-lb.menu.item>
                    </c-lb.menu>
                </c-lb.dropdown.content>
            </c-lb.dropdown>

            <c-lb.dropdown placement="left" alignment="end">
                <c-lb.dropdown.trigger class="btn m-1">Left End</c-lb.dropdown.trigger>
                <c-lb.dropdown.content class="bg-base-100 rounded-box w-52 p-2 shadow-sm">
                    <c-lb.menu class="w-full">
                        <c-lb.menu.item >Item 1</c-lb.menu.item>
                        <c-lb.menu.item >Item 2</c-lb.menu.item>
                    </c-lb.menu>
                </c-lb.dropdown.content>
            </c-lb.dropdown>
        </div>
    </div>

    <!-- Right placement with different alignments -->
    <div>
        <h3 class="text-lg font-semibold mb-4">Right Placement</h3>
        <div class="flex gap-4 flex-wrap">
            <c-lb.dropdown placement="right" alignment="start">
                <c-lb.dropdown.trigger class="btn m-1">Right Start</c-lb.dropdown.trigger>
                <c-lb.dropdown.content class="bg-base-100 rounded-box w-52 p-2 shadow-sm">
                    <c-lb.menu class="w-full">
                        <c-lb.menu.item >Item 1</c-lb.menu.item>
                        <c-lb.menu.item >Item 2</c-lb.menu.item>
                    </c-lb.menu>
                </c-lb.dropdown.content>
            </c-lb.dropdown>

            <c-lb.dropdown placement="right" alignment="center">
                <c-lb.dropdown.trigger class="btn m-1">Right Center</c-lb.dropdown.trigger>
                <c-lb.dropdown.content class="bg-base-100 rounded-box w-52 p-2 shadow-sm">
                    <c-lb.menu class="w-full">
                        <c-lb.menu.item >Item 1</c-lb.menu.item>
                        <c-lb.menu.item >Item 2</c-lb.menu.item>
                    </c-lb.menu>
                </c-lb.dropdown.content>
            </c-lb.dropdown>

            <c-lb.dropdown placement="right" alignment="end">
                <c-lb.dropdown.trigger class="btn m-1">Right End</c-lb.dropdown.trigger>
                <c-lb.dropdown.content class="bg-base-100 rounded-box w-52 p-2 shadow-sm">
                    <c-lb.menu class="w-full">
                        <c-lb.menu.item >Item 1</c-lb.menu.item>
                        <c-lb.menu.item >Item 2</c-lb.menu.item>
                    </c-lb.menu>
                </c-lb.dropdown.content>
            </c-lb.dropdown>
        </div>
    </div>
</div>
