<div x-data="{ open: 1 }" class="bg-white dark:bg-gray-800 rounded-lg shadow divide-y divide-gray-200 dark:divide-gray-700">
    <div class="px-6 py-4">
        <button @click="open = open === 1 ? 0 : 1" class="flex justify-between items-center w-full text-left">
            <span class="font-medium text-gray-900 dark:text-white">Section 1</span>
            <svg :class="open === 1 ? 'rotate-180' : ''" class="w-5 h-5 transform transition-transform" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
            </svg>
        </button>
        <div x-show="open === 1" class="mt-2 text-gray-600 dark:text-gray-400">Content for section 1</div>
    </div>
</div>