分屏式布局 Tailwind网站组件

黑白对比的分屏设计，左右分割布局，强烈的视觉对比效果

<section class="relative h-screen">
            <div class="flex h-full">
                <div class="w-full md:w-1/2 bg-black text-white flex items-center justify-center">
                    <div class="text-center p-8">
                        <h2 class="text-4xl md:text-6xl font-bold mb-4">DARK</h2>
                        <p class="text-lg opacity-80">探索神秘的黑暗面</p>
                        <button class="mt-6 border-2 border-white px-6 py-3 rounded-lg hover:bg-white hover:text-black transition-colors">
                            进入黑夜
                        </button>
                    </div>
                </div>
                <div class="w-full md:w-1/2 bg-white text-black flex items-center justify-center">
                    <div class="text-center p-8">
                        <h2 class="text-4xl md:text-6xl font-bold mb-4">LIGHT</h2>
                        <p class="text-lg opacity-80">拥抱光明的未来</p>
                        <button class="mt-6 bg-black text-white px-6 py-3 rounded-lg hover:bg-gray-800 transition-colors">
                            迎接光明
                        </button>
                    </div>
                </div>
            </div>
        </section>