<!DOCTYPE html>

<html lang="en">
<head>
        <?php echo view('partials/title-meta', array('title' => 'Buttons')) ?> <?= $this->include('partials/head-css') ?>
    </head>
<body>
<div class="wrapper">
            <?php echo view('partials/topbar', array('subtitle' => 'Base UI', 'title' => 'Buttons')) ?> <?= $this->include('partials/sidenav') ?>

            <!-- Start Page Content here -->
<div class="page-content">
<main>
                    <?php echo view('partials/page-title', array('subtitle' => 'Base UI', 'title' => 'Buttons')) ?>

                    <div class="container">
<div class="grid grid-cols-1 gap-base">
<div class="card">
<div class="card-header">
<h4 class="card-title">Default Buttons</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">
                                        Use the
                                        <code>.btn</code>
                                        class on
                                        <code>&lt;a&gt;</code>
                                        ,
                                        <code>&lt;button&gt;</code>
                                        , or
                                        <code>&lt;input&gt;</code>
                                        elements to quickly create a styled button.
                                    </p>
<div class="flex flex-wrap gap-2.5">
<button class="btn border-default-300" type="button">Default</button>
<button class="btn bg-primary hover:bg-primary-hover text-white" type="button">Primary</button>
<button class="btn bg-secondary hover:bg-secondary-hover text-white" type="button">Secondary</button>
<button class="btn bg-success hover:bg-success-hover text-white" type="button">Success</button>
<button class="btn bg-danger hover:bg-danger-hover text-white" type="button">Danger</button>
<button class="btn bg-warning hover:bg-warning-hover text-white" type="button">Warning</button>
<button class="btn bg-info hover:bg-info-hover text-white" type="button">Info</button>
<button class="btn bg-light text-dark hover:bg-light-hover" type="button">Light</button>
<button class="btn bg-dark hover:bg-dark-hover text-white" type="button">Dark</button>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Button Rounded</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">
                                        Add
                                        <code>.rounded-full</code>
                                        to buttons to give them smooth, pill-shaped corners.
                                    </p>
<div class="flex flex-wrap gap-2.5">
<button class="btn border-default-300 rounded-full" type="button">Default</button>
<button class="btn bg-primary hover:bg-primary-hover rounded-full text-white" type="button">Primary</button>
<button class="btn bg-secondary hover:bg-secondary-hover rounded-full text-white" type="button">Secondary</button>
<button class="btn bg-success hover:bg-success-hover rounded-full text-white" type="button">Success</button>
<button class="btn bg-danger hover:bg-danger-hover rounded-full text-white" type="button">Danger</button>
<button class="btn bg-warning hover:bg-warning-hover rounded-full text-white" type="button">Warning</button>
<button class="btn bg-info hover:bg-info-hover rounded-full text-white" type="button">Info</button>
<button class="btn bg-light text-dark hover:bg-light-hover rounded-full" type="button">Light</button>
<button class="btn bg-dark hover:bg-dark-hover rounded-full text-white" type="button">Dark</button>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Button Outline</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">
                                        Use the
                                        <code>.border-*</code>
                                        classes to create buttons with colored borders.
                                    </p>
<div class="flex flex-wrap gap-2.5">
<button class="btn border-primary text-primary hover:bg-primary hover:text-white" type="button">Primary</button>
<button class="btn border-secondary text-secondary hover:bg-secondary hover:text-white" type="button">Secondary</button>
<button class="btn border-success text-success hover:bg-success hover:text-white" type="button">Success</button>
<button class="btn border-danger text-danger hover:bg-danger hover:text-white" type="button">Danger</button>
<button class="btn border-warning text-warning hover:bg-warning hover:text-white" type="button">Warning</button>
<button class="btn border-info text-info hover:bg-info hover:text-white" type="button">Info</button>
<button class="btn border-light text-dark hover:bg-light hover:text-dark" type="button">Light</button>
<button class="btn border-dark text-dark hover:bg-dark hover:text-white" type="button">Dark</button>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Button Outline Rounded</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">
                                        Apply
                                        <code>.rounded-full</code>
                                        to outline buttons to give them smooth, pill-shaped corners.
                                    </p>
<div class="flex flex-wrap gap-2.5">
<button class="btn border-primary text-primary hover:bg-primary rounded-full hover:text-white" type="button">Primary</button>
<button class="btn border-secondary text-secondary hover:bg-secondary rounded-full hover:text-white" type="button">Secondary</button>
<button class="btn border-success text-success hover:bg-success rounded-full hover:text-white" type="button">Success</button>
<button class="btn border-danger text-danger hover:bg-danger rounded-full hover:text-white" type="button">Danger</button>
<button class="btn border-warning text-warning hover:bg-warning rounded-full hover:text-white" type="button">Warning</button>
<button class="btn border-info text-info hover:bg-info rounded-full hover:text-white" type="button">Info</button>
<button class="btn border-light text-dark hover:bg-light hover:text-dark rounded-full" type="button">Light</button>
<button class="btn border-dark text-dark hover:bg-dark rounded-full hover:text-white" type="button">Dark</button>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Soft Buttons</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">
                                        Use the
                                        <code>.bg-*/15</code>
                                        classes to create buttons with soft, tinted background colors.
                                    </p>
<div class="flex flex-wrap gap-2.5">
<button class="btn text-primary bg-primary/15 hover:bg-primary hover:text-white" type="button">Primary</button>
<button class="btn text-secondary bg-secondary/15 hover:bg-secondary hover:text-white" type="button">Secondary</button>
<button class="btn text-success bg-success/15 hover:bg-success hover:text-white" type="button">Success</button>
<button class="btn text-danger bg-danger/15 hover:bg-danger hover:text-white" type="button">Danger</button>
<button class="btn text-warning bg-warning/15 hover:bg-warning hover:text-white" type="button">Warning</button>
<button class="btn text-info bg-info/15 hover:bg-info hover:text-white" type="button">Info</button>
<button class="btn text-dark bg-dark/15 hover:bg-dark hover:text-white" type="button">Dark</button>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Soft Rounded Buttons</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">
                                        Combine
                                        <code>.bg-*/15</code>
                                        with
                                        <code>.rounded-full</code>
                                        to create soft, pill-shaped buttons.
                                    </p>
<div class="flex flex-wrap gap-2.5">
<button class="btn text-primary bg-primary/15 hover:bg-primary rounded-full hover:text-white" type="button">Primary</button>
<button class="btn text-secondary bg-secondary/15 hover:bg-secondary rounded-full hover:text-white" type="button">Secondary</button>
<button class="btn text-success bg-success/15 hover:bg-success rounded-full hover:text-white" type="button">Success</button>
<button class="btn text-danger bg-danger/15 hover:bg-danger rounded-full hover:text-white" type="button">Danger</button>
<button class="btn text-warning bg-warning/15 hover:bg-warning rounded-full hover:text-white" type="button">Warning</button>
<button class="btn text-info bg-info/15 hover:bg-info rounded-full hover:text-white" type="button">Info</button>
<button class="btn text-dark bg-dark/15 hover:bg-dark rounded-full hover:text-white" type="button">Dark</button>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Ghost Buttons</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">Use ghost-style buttons to keep the background transparent and highlight the color on hover.</p>
<div class="flex flex-wrap gap-2.5">
<button class="btn text-primary hover:bg-primary rounded hover:text-white" type="button">Primary</button>
<button class="btn text-secondary hover:bg-secondary rounded hover:text-white" type="button">Secondary</button>
<button class="btn text-success hover:bg-success rounded hover:text-white" type="button">Success</button>
<button class="btn text-danger hover:bg-danger rounded hover:text-white" type="button">Danger</button>
<button class="btn text-warning hover:bg-warning rounded hover:text-white" type="button">Warning</button>
<button class="btn text-info hover:bg-info rounded hover:text-white" type="button">Info</button>
<button class="btn text-dark hover:bg-dark rounded hover:text-white" type="button">Dark</button>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Ghost Rounded Buttons</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">
                                        Combine ghost-style buttons with
                                        <code>.rounded-full</code>
                                        to create rounded, transparent buttons that highlight on hover.
                                    </p>
<div class="flex flex-wrap gap-2.5">
<button class="btn text-primary hover:bg-primary rounded-full hover:text-white" type="button">Primary</button>
<button class="btn text-secondary hover:bg-secondary rounded-full hover:text-white" type="button">Secondary</button>
<button class="btn text-success hover:bg-success rounded-full hover:text-white" type="button">Success</button>
<button class="btn text-danger hover:bg-danger rounded-full hover:text-white" type="button">Danger</button>
<button class="btn text-warning hover:bg-warning rounded-full hover:text-white" type="button">Warning</button>
<button class="btn text-info hover:bg-info rounded-full hover:text-white" type="button">Info</button>
<button class="btn text-dark hover:bg-dark rounded-full hover:text-white" type="button">Dark</button>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Gradient Buttons</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">Use gradient utility classes to apply smooth color transitions and create stylish gradient buttons.</p>
<div class="flex flex-wrap gap-2.5">
<button class="btn border-0 bg-linear-to-br from-purple-600 to-blue-500 text-white hover:bg-linear-to-bl" type="button">Purple to Blue</button>
<button class="btn border-0 bg-linear-to-r from-cyan-500 to-blue-500 text-white hover:bg-linear-to-bl" type="button">Cyan to Blue</button>
<button class="btn border-0 bg-linear-to-br from-green-400 to-blue-600 text-white hover:bg-linear-to-bl" type="button">Green to Blue</button>
<button class="btn border-0 bg-linear-to-r from-purple-500 to-pink-500 text-white hover:bg-linear-to-l" type="button">Purple to Pink</button>
<button class="btn border-0 bg-linear-to-br from-pink-500 to-orange-400 text-white hover:bg-linear-to-bl" type="button">Pink to Orange</button>
<button class="btn border-0 bg-linear-to-r from-teal-200 to-lime-200 text-gray-900 hover:bg-linear-to-l" type="button">Teal to Lime</button>
<button class="btn border-0 bg-linear-to-r from-red-200 via-red-300 to-yellow-200 text-gray-900 hover:bg-linear-to-bl" type="button">Red to Yellow</button>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="col-span-1">
<div class="card">
<div class="card-header">
<h4 class="card-title">Gradient Rounded Buttons</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">
                                            Combine gradient utilities with
                                            <code>.rounded-full</code>
                                            to create smooth, pill-shaped buttons with blended color transitions.
                                        </p>
<div class="flex flex-wrap gap-2.5">
<button class="btn rounded-full border-0 bg-linear-to-br from-purple-600 to-blue-500 text-white hover:bg-linear-to-bl" type="button">Purple to Blue</button>
<button class="btn rounded-full border-0 bg-linear-to-r from-cyan-500 to-blue-500 text-white hover:bg-linear-to-bl" type="button">Cyan to Blue</button>
<button class="btn rounded-full border-0 bg-linear-to-br from-green-400 to-blue-600 text-white hover:bg-linear-to-bl" type="button">Green to Blue</button>
<button class="btn rounded-full border-0 bg-linear-to-r from-purple-500 to-pink-500 text-white hover:bg-linear-to-l" type="button">Purple to Pink</button>
<button class="btn rounded-full border-0 bg-linear-to-br from-pink-500 to-orange-400 text-white hover:bg-linear-to-bl" type="button">Pink to Orange</button>
<button class="btn rounded-full border-0 bg-linear-to-r from-teal-200 to-lime-200 text-gray-900 hover:bg-linear-to-l" type="button">Teal to Lime</button>
<button class="btn rounded-full border-0 bg-linear-to-r from-red-200 via-red-300 to-yellow-200 text-gray-900 hover:bg-linear-to-bl" type="button">Red to Yellow</button>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
</div>
<!-- end col-->
<div class="col-span-1">
<div class="card">
<div class="card-header">
<h4 class="card-title">Button Sizes</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">
                                            Use
                                            <code>.btn-lg</code>
                                            or
                                            <code>.btn-sm</code>
                                            to quickly create larger or smaller button sizes.
                                        </p>
<div class="flex flex-wrap items-center gap-2.5">
<button class="btn btn-lg bg-primary hover:bg-primary-hover text-white" type="button">Large</button>
<button class="btn bg-info hover:bg-info-hover text-white" type="button">Normal</button>
<button class="btn btn-sm bg-success hover:bg-success-hover text-white" type="button">Small</button>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
</div>
<!-- end col-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Disabled Buttons</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">
                                        Add the
                                        <code>disabled</code>
                                        attribute to a
                                        <code>&lt;button&gt;</code>
                                        to prevent user interaction and visually indicate an inactive state.
                                    </p>
<div class="flex flex-wrap gap-2.5">
<button class="btn bg-info text-white hover:bg-info-hover" disabled="" type="button">Info</button>
<button class="btn bg-danger text-white hover:bg-danger-hover" disabled="" type="button">Danger</button>
<button class="btn bg-dark text-white hover:bg-dark-hover" disabled="" type="button">Dark</button>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="col-span-1">
<div class="card">
<div class="card-header">
<h4 class="card-title">Block Button</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">
                                            Add the
                                            <code>.w-full</code>
                                            class to make buttons span the full width of their container.
                                        </p>
<div class="space-y-3">
<button class="btn bg-primary hover:bg-primary-hover w-full text-white" type="button">Block Button</button>
<button class="btn btn-lg bg-success hover:bg-success-hover w-full text-white" type="button">Block Button</button>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
</div>
<!-- end col-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Icon Buttons</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">Icon buttons let you create compact controls using only an icon, or pair an icon with text for more clarity in toolbars and action areas.</p>
<div class="flex flex-wrap gap-2.5">
<button class="btn btn-icon bg-primary hover:bg-primary-hover text-white" type="button">
<i class="iconify tabler--star text-lg"></i>
</button>
<button class="btn btn-icon bg-secondary hover:bg-secondary-hover text-white" type="button">
<i class="iconify tabler--leaf text-lg"></i>
</button>
<button class="btn btn-icon bg-warning hover:bg-warning-hover text-white" type="button">
<i class="iconify tabler--settings text-lg"></i>
</button>
<button class="btn btn-icon bg-info/15 text-info hover:bg-info hover:text-white" type="button">
<i class="iconify tabler--bell text-lg"></i>
</button>
<button class="btn btn-icon bg-secondary hover:bg-secondary-hover text-white" type="button">
<i class="iconify tabler--rocket text-lg"></i>
</button>
<button class="btn btn-icon border-dark text-dark hover:bg-dark rounded-full border hover:text-white" type="button">
<i class="iconify tabler--plane text-lg"></i>
</button>
<button class="btn btn-icon bg-secondary/15 text-secondary hover:bg-secondary hover:text-white" type="button">
<i class="iconify tabler--microphone text-lg"></i>
</button>
<button class="btn bg-light/60 hover:text-primary" type="button">
<i class="iconify tabler--hand-stop text-lg"></i>
                                            Stop
                                        </button>
<button class="btn bg-dark text-white" type="button">
<i class="iconify tabler--bolt text-lg"></i>
                                            Boost
                                        </button>
<button class="btn border-info text-info hover:bg-info border hover:text-white" type="button">
<i class="iconify tabler--credit-card text-base"></i>
                                            Payment
                                        </button>
<button class="btn bg-danger hover:bg-danger-hover text-white" type="button">
<i class="iconify tabler--tools text-base"></i>
                                            Tools
                                        </button>
</div>
<div class="mt-5 flex flex-wrap gap-2.5">
<button class="btn border-secondary text-secondary hover:bg-secondary size-7.5 border hover:text-white" type="button">
<i class="iconify tabler--star text-xs"></i>
</button>
<button class="btn bg-primary hover:bg-primary-hover size-7.5 text-white" type="button">
<i class="iconify tabler--leaf text-xs"></i>
</button>
<button class="btn bg-success hover:bg-success-hover size-7.5 rounded-full text-white" type="button">
<i class="iconify tabler--settings text-xs"></i>
</button>
<button class="btn border-secondary text-secondary hover:bg-secondary size-11.25 border hover:text-white" type="button">
<i class="iconify tabler--bell text-xl"></i>
</button>
<button class="btn bg-primary hover:bg-primary-hover size-11.25 rounded-full text-white" type="button">
<i class="iconify tabler--rocket text-xl"></i>
</button>
<button class="btn bg-success hover:bg-success-hover size-11.25 rounded-full text-white" type="button">
<i class="iconify tabler--share text-xl"></i>
</button>
<button class="btn bg-info hover:bg-info-hover size-11.25 text-white" type="button">
<i class="iconify tabler--star text-xl"></i>
</button>
<button class="btn bg-warning hover:bg-warning-hover size-11.25 text-white" type="button">
<i class="iconify tabler--alert-octagon text-xl"></i>
</button>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Button Tags</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">
                                        The
                                        <code>.btn</code>
                                        class works with
                                        <code>&lt;button&gt;</code>
                                        ,
                                        <code>&lt;a&gt;</code>
                                        , and
                                        <code>&lt;input&gt;</code>
                                        elements, though their appearance may vary slightly by browser.
                                    </p>
<div class="flex flex-wrap gap-2.5">
<a class="btn bg-primary hover:bg-primary-hover rounded text-white" href="#">Link</a>
<button class="btn bg-primary hover:bg-primary-hover rounded text-white" type="submit">Button</button>
<input class="btn bg-primary! hover:bg-primary-hover! rounded text-white" type="button" value="Input"/>
<input class="btn bg-primary! hover:bg-primary-hover! rounded text-white" type="submit" value="Submit"/>
<input class="btn bg-primary! hover:bg-primary-hover! rounded text-white" type="reset" value="Reset"/>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="col-span-1">
<div class="card">
<div class="card-header">
<h4 class="card-title">Button Group</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">
                                            Use
                                            <code>inline-flex</code>
                                            to group buttons inside a single container, allowing them to align neatly side by side or stack vertically with consistent spacing.
                                        </p>
<div class="mb-3 inline-flex">
<button class="btn bg-light hover:text-primary rounded-e-none" type="button">Left</button>
<button class="btn bg-light hover:text-primary rounded-none" type="button">Middle</button>
<button class="btn bg-light hover:text-primary rounded-s-none" type="button">Right</button>
</div>
<br/>
<div class="mb-3 inline-flex">
<button class="btn bg-light hover:text-primary rounded-e-none" type="button">1</button>
<button class="btn bg-light hover:text-primary rounded-none" type="button">2</button>
<button class="btn bg-light hover:text-primary rounded-none" type="button">3</button>
<button class="btn bg-light hover:text-primary rounded-s-none" type="button">4</button>
</div>
<div class="mb-3 inline-flex">
<button class="btn bg-light hover:text-primary rounded-e-none" type="button">5</button>
<button class="btn bg-light hover:text-primary rounded-none" type="button">6</button>
<button class="btn bg-light hover:text-primary rounded-s-none" type="button">7</button>
</div>
<div class="mb-3 inline-flex">
<button class="btn bg-light hover:text-primary" type="button">8</button>
</div>
<br/>
<div class="mb-3 inline-flex">
<button class="btn bg-light hover:text-primary rounded-e-none" type="button">1</button>
<button class="btn bg-primary hover:bg-primary-hover rounded-none text-white" type="button">2</button>
<button class="btn bg-light hover:text-primary rounded-none" type="button">3</button>
<div class="hs-dropdown relative inline-flex">
<button aria-expanded="false" aria-haspopup="menu" aria-label="Dropdown" class="btn bg-light hover:text-primary rounded-s-none" type="button">
                                                    Dropdown
                                                    <i class="iconify tabler--chevron-down"></i>
</button>
<div class="hs-dropdown-menu" role="menu">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
<br/>
<div class="grid grid-cols-1 md:grid-cols-4 gap-base">
<div>
<div class="inline-flex flex-col">
<button class="btn bg-light hover:text-primary rounded-b-none" type="button">Top</button>
<button class="btn bg-light hover:text-primary rounded-none" type="button">Middle</button>
<button class="btn bg-light hover:text-primary rounded-t-none" type="button">Bottom</button>
</div>
</div>
<div>
<div class="inline-flex flex-col">
<button class="btn bg-light hover:text-primary rounded-b-none" type="button">Button 1</button>
<button class="btn bg-light hover:text-primary rounded-none" type="button">Button 2</button>
<div class="hs-dropdown relative inline-flex">
<button aria-expanded="false" aria-haspopup="menu" aria-label="Dropdown" class="btn bg-light hover:text-primary rounded-t-none" type="button">
                                                            Button 3
                                                            <i class="iconify tabler--chevron-down"></i>
</button>
<div class="hs-dropdown-menu" role="menu">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
</div>
<!-- end col-->
</div>
</div>
</main>

                <?= $this->include('partials/footer') ?>
            </div>
<!-- End Page content -->
</div>

        <?= $this->include('partials/customizer') ?> <?= $this->include('partials/footer-scripts') ?>
    </body>
</html>