<div x-data="{ activeTab: null }">
    <div class="space-y-2">
      <!-- Accordion Item 1 -->
      <div class="border rounded-md">
        <button
          @click="activeTab = activeTab === 1 ? null : 1"
          class="flex justify-between w-full px-4 py-2 text-left"
        >
          <span>Accordion Item 1</span>
          <svg
            x-bind:class="{'rotate-180': activeTab === 1}"
            class="w-5 h-5 transition-transform"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path d="M19 9l-7 7-7-7"></path>
          </svg>
        </button>
        <div
          x-show="activeTab === 1"
          x-transition
          class="px-4 py-2"
        >
          <p>Content for Accordion Item 1</p>
        </div>
      </div>
  
      <!-- Accordion Item 2 -->
      <div class="border rounded-md">
        <button
          @click="activeTab = activeTab === 2 ? null : 2"
          class="flex justify-between w-full px-4 py-2 text-left"
        >
          <span>Accordion Item 2</span>
          <svg
            x-bind:class="{'rotate-180': activeTab === 2}"
            class="w-5 h-5 transition-transform"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path d="M19 9l-7 7-7-7"></path>
          </svg>
        </button>
        <div
          x-show="activeTab === 2"
          x-transition
          class="px-4 py-2"
        >
          <p>Content for Accordion Item 2</p>
        </div>
      </div>
    </div>
  </div>