<section class="section">
        <div class="container">
            <div class="box mb-2">Section and Container</div>
        </div>
    </section>
    

    <div class="layout example-layout">
        <header class="box">Header</header>
        <div class="box">Banner</div>
        <div class="layout-content">
            <main class="box w-full">
                <div class="flex-center h-full flex-col">
                    <h1>Main Content</h1>
                    <button class="button my-3">Fullscreen Layout</button>
                </div>
            </main>
        </div>
        <footer class="box">Footer</footer>
    </div>
    

    <div class="layout example-layout">
        <header class="box">Header</header>
        <div class="box">Banner</div>
        <div class="layout-content">
            <aside class="box" style="width: 280px; overflow-y: auto">
                Sidebar
                <div style="height: 200vh"></div>
            </aside>
            <main class="box flex-1">
                <div class="flex-center h-full flex-col">
                    <h1>Main Content</h1>
                    <button class="button my-3">Fullscreen Layout</button>
                </div>
            </main>
        </div>
        <footer class="box">Footer</footer>
    </div>
    

    <div class="layout example-layout">
        <header class="box">Header</header>
        <div class="box">Banner</div>
        <div class="layout-content">
            <div class="box flex-1">Left</div>
            <main class="box flex-2">
                <div class="flex-center h-full flex-col">
                    <h1>Main Content</h1>
                    <button class="button my-3">Fullscreen Layout</button>
                </div>
            </main>
            <div class="box flex-1">Right</div>
        </div>
        <footer class="box">Footer</footer>
    </div>
    

    <div class="layout example-layout">
        <div class="layout-content gap-2">
            <main class="box" style="width: 50%">
                <div class="flex-center h-full flex-col">
                    <h1>Main Content</h1>
                    <button class="button my-3">Fullscreen Layout</button>
                </div>
            </main>
            <div class="divider vertical resizer">
                <div class="icon">
                    <i class="fa-solid fa-arrows-left-right"></i>
                </div>
            </div>
            <div class="box" style="width: 50%">Right</div>
        </div>
    </div>