<div x-data="{ open: false }">
    <button @click="open = true" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Open Drawer</button>

    <div x-show="open" class="fixed inset-0 z-50" x-cloak>
        <div @click="open = false" class="fixed inset-0 bg-black/50"></div>
        
        <div class="fixed inset-y-0 left-0 w-80 bg-white dark:bg-gray-900 shadow-2xl"
             x-transition:enter="transform transition ease-in-out duration-300"
             x-transition:enter-start="-translate-x-full"
             x-transition:enter-end="translate-x-0"
             x-transition:leave="transform transition ease-in-out duration-300"
             x-transition:leave-start="translate-x-0"
             x-transition:leave-end="-translate-x-full">
            <div class="p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Drawer Title</h3>
                <p class="mt-2 text-gray-600 dark:text-gray-400">Drawer content</p>
            </div>
        </div>
    </div>
</div>