<div class="bg-gray-800 rounded-lg" wire:key="dark-mode-accordion">
    <div x-data="{ open: false }">
        <button @click="open = ! open" class="flex justify-between w-full px-4 py-4 text-sm font-medium text-left text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:outline-none focus-visible:ring focus-visible:ring-gray-500 focus-visible:ring-opacity-75">
            <span>Accordion Item 1</span>
            <span x-show="! open">
                <svg class="w-5 h-5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                          d="M6.293 7.293a1 1 0 0 1 1.414 0L10 9.586l2.293-2.293a1 1 0 1 1 1.414 1.414l-3 3a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 0-1.414z"/>
                </svg>
            </span>
            <span x-show="open">
                <svg class="w-5 h-5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                          d="M13.707 12.707a1 1 0 0 1-1.414 0L10 10.414l-2.293 2.293a1 1 0 1 1-1.414-1.414l3-3a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414z"/>
                </svg>
            </span>
        </button>
        <div x-show="open" class="px-4 pt-4 pb-2 text-sm text-white">
            <p>Nisi aute ipsum ea commodo esse incididunt est laboris incididunt in irure. Ullamco fugiat cillum enim occaecat minim ea duis ex duis magna amet fugiat exercitation et nostrud. Nostrud aliqua consequat laborum do dolor nisi tempor velit do cupidatat ad ea nisi do aute. Irure sunt id commodo. Ad laboris non do tempor deserunt quis. Culpa laborum ex cupidatat eu aliqua non voluptate nulla. Quis sit voluptate laborum anim excepteur ipsum. Et do duis ad amet exercitation adipisicing tempor eu ex et.</p>
        </div>
    </div>
    <div x-data="{ open: false }">
        <button @click="open = ! open" class="flex justify-between w-full px-4 py-4 text-sm font-medium text-left text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:outline-none focus-visible:ring focus-visible:ring-gray-500 focus-visible:ring-opacity-75">
            <span>Accordion Item 2</span>
            <span x-show="! open">
                <svg class="w-5 h-5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                          d="M6.293 7.293a1 1 0 0 1 1.414 0L10 9.586l2.293-2.293a1 1 0 1 1 1.414 1.414l-3 3a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 0-1.414z"/>
                </svg>
            </span>
            <span x-show="open">
                <svg class="w-5 h-5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                          d="M13.707 12.707a1 1 0 0 1-1.414 0L10 10.414l-2.293 2.293a1 1 0 1 1-1.414-1.414l3-3a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414z"/>
                </svg>
            </span>
        </button>
        <div x-show="open" class="px-4 pt-4 pb-2 text-sm text-white">
            <p>Nisi aute ipsum ea commodo esse incididunt est laboris incididunt in irure. Ullamco fugiat cillum enim occaecat minim ea duis ex duis magna amet fugiat exercitation et nostrud. Nostrud aliqua consequat laborum do dolor nisi tempor velit do cupidatat ad ea nisi do aute. Irure sunt id commodo. Ad laboris non do tempor deserunt quis. Culpa laborum ex cupidatat eu aliqua non voluptate nulla. Quis sit voluptate laborum anim excepteur ipsum. Et do duis ad amet exercitation adipisicing tempor eu ex et.</p>
        </div>
    </div>
    <div x-data="{ open: false }">
        <button @click="open = ! open" class="flex justify-between w-full px-4 py-4 text-sm font-medium text-left text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:outline-none focus-visible:ring focus-visible:ring-gray-500 focus-visible:ring-opacity-75">
            <span>Accordion Item 3</span>
            <span x-show="! open">
                <svg class="w-5 h-5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                          d="M6.293 7.293a1 1 0 0 1 1.414 0L10 9.586l2.293-2.293a1 1 0 1 1 1.414 1.414l-3 3a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 0-1.414z"/>
                </svg>
            </span>
            <span x-show="open">
                <svg class="w-5 h-5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                          d="M13.707 12.707a1 1 0 0 1-1.414 0L10 10.414l-2.293 2.293a1 1 0 1 1-1.414-1.414l3-3a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414z"/>
                </svg>
            </span>
        </button>
        <div x-show="open" class="px-4 pt-4 pb-2 text-sm text-white">
            <p>Nisi aute ipsum ea commodo esse incididunt est laboris incididunt in irure. Ullamco fugiat cillum enim occaecat minim ea duis ex duis magna amet fugiat exercitation et nostrud. Nostrud aliqua consequat laborum do dolor nisi tempor velit do cupidatat ad ea nisi do aute. Irure sunt id commodo. Ad laboris non do tempor deserunt quis. Culpa laborum ex cupidatat eu aliqua non voluptate nulla. Quis sit voluptate laborum anim excepteur ipsum. Et do duis ad amet exercitation adipisicing tempor eu ex et.</p>
        </div>
    </div>
</div>

<div x-data="{ open: false }">
    <button @click="open = ! open" class="flex justify-between w-full px-4 py-4 text-sm font-medium text-left rounded-lg hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-gray-500 focus-visible:ring-opacity-75">
        <span>Accordion Item 1</span>
        <span x-show="! open">
        <svg class="w-5 h-5 text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M6.293 7.293a1 1 0 0 1 1.414 0L10 9.586l2.293-2.293a1 1 0 1 1 1.414 1.414l-3 3a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 0-1.414z"/>
        </svg>
    </span>
        <span x-show="open">
        <svg class="w-5 h-5 text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M13.707 12.707a1 1 0 0 1-1.414 0L10 10.414l-2.293 2.293a1 1 0 1 1-1.414-1.414l3-3a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414z"/>
        </svg>
    </span>
    </button>
    <div x-show="open" class="px-4 pt-4 pb-2 text-sm text-gray-700">
        <p>Elit non aliquip voluptate sit nostrud non nisi magna velit ullamco. Ad veniam aliquip veniam mollit veniam tempor ea anim excepteur fugiat laboris voluptate. In nostrud nisi ea proident commodo ipsum voluptate do nisi enim excepteur esse velit. Ut exercitation mollit laborum voluptate cupidatat.</p>
    </div>
</div>
<div x-data="{ open: false }">
    <button @click="open = ! open" class="flex justify-between w-full px-4 py-4 text-sm font-medium text-left rounded-lg hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-gray-500 focus-visible:ring-opacity-75">
        <span>Accordion Item 2</span>
        <span x-show="! open">
        <svg class="w-5 h-5 text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M6.293 7.293a1 1 0 0 1 1.414 0L10 9.586l2.293-2.293a1 1 0 1 1 1.414 1.414l-3 3a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 0-1.414z"/>
        </svg>
    </span>
        <span x-show="open">
        <svg class="w-5 h-5 text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M13.707 12.707a1 1 0 0 1-1.414 0L10 10.414l-2.293 2.293a1 1 0 1 1-1.414-1.414l3-3a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414z"/>
        </svg>
    </span>
    </button>
    <div x-show="open" class="px-4 pt-4 pb-2 text-sm text-gray-700">
        <p>Elit non aliquip voluptate sit nostrud non nisi magna velit ullamco. Ad veniam aliquip veniam mollit veniam tempor ea anim excepteur fugiat laboris voluptate. In nostrud nisi ea proident commodo ipsum voluptate do nisi enim excepteur esse velit. Ut exercitation mollit laborum voluptate cupidatat.</p>
    </div>
</div>
<div x-data="{ open: false }">
    <button @click="open = ! open" class="flex justify-between w-full px-4 py-4 text-sm font-medium text-left rounded-lg hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-gray-500 focus-visible:ring-opacity-75">
        <span>Accordion Item 3</span>
        <span x-show="! open">
        <svg class="w-5 h-5 text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M6.293 7.293a1 1 0 0 1 1.414 0L10 9.586l2.293-2.293a1 1 0 1 1 1.414 1.414l-3 3a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 0-1.414z"/>
        </svg>
    </span>
        <span x-show="open">
        <svg class="w-5 h-5 text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M13.707 12.707a1 1 0 0 1-1.414 0L10 10.414l-2.293 2.293a1 1 0 1 1-1.414-1.414l3-3a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414z"/>
        </svg>
    </span>
    </button>
    <div x-show="open" class="px-4 pt-4 pb-2 text-sm text-gray-700">
        <p>Elit non aliquip voluptate sit nostrud non nisi magna velit ullamco. Ad veniam aliquip veniam mollit veniam tempor ea anim excepteur fugiat laboris voluptate. In nostrud nisi ea proident commodo ipsum voluptate do nisi enim excepteur esse velit. Ut exercitation mollit laborum voluptate cupidatat.</p>
    </div>
</div>