<div class="max-w-5xl mx-auto">

    <!-- Accordion Container -->
    <div id="accordion" class="bg-white shadow overflow-hidden rounded-md">
  
      <!-- Accordion Item 1 -->
      <div class="accordion-item">
        <!-- Accordion Heading 1 -->
        <div class="accordion-header bg-gray-50 p-4 px-6 border-b">
          <button class="accordion-button text-gray-700">
            Section 1
          </button>
        </div>
  
        <!-- Accordion Content 1 -->
        <div class="accordion-content hidden bg-white p-4 text-gray-700">
          <p>Content for Section 1</p>
        </div>
      </div>
  
      <!-- Accordion Item 2 -->
      <div class="accordion-item">
        <!-- Accordion Heading 2 -->
        <div class="accordion-header bg-gray-50 p-4 px-6 border-b">
          <button class="accordion-button text-gray-700">
            Section 2
          </button>
        </div>
  
        <!-- Accordion Content 2 -->
        <div class="accordion-content hidden bg-white p-4 text-gray-700">
          <p>Content for Section 2</p>
        </div>
      </div>
  
      <!-- Add more accordion items as needed -->
  
    </div>
  
  </div>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
       const accordionItems = document.querySelectorAll('.accordion-item');
   
       accordionItems.forEach(item => {
         const accordionButton = item.querySelector('.accordion-button');
   
         accordionButton.addEventListener('click', () => {
           // Toggle the 'hidden' class on the clicked accordion content
           item.querySelector('.accordion-content').classList.toggle('hidden');
   
           // Hide other accordion items if they are open
           accordionItems.forEach(otherItem => {
             if (otherItem !== item && !otherItem.querySelector('.accordion-content').classList.contains('hidden')) {
               otherItem.querySelector('.accordion-content').classList.add('hidden');
             }
           });
         });
       });
     });
   </script>

  <div x-data="{ openSection: null }" class="bg-gray-50 py-6 flex flex-col items-center justify-center relative overflow-hidden sm:py-12">

  <div @click="openSection = (openSection === 1) ? null : 1" class="p-4 bg-blue-100 w-1/2 rounded flex justify-between items-center cursor-pointer">
    <div class="flex items-center gap-2">
      <svg height="200px" width="200px" version="1.1" id="Icons" class="h-6 w-6 fill-blue-500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M29.3,22.8L29.3,22.8l-3.9-4.7C24.8,17.4,24,17,23.1,17H8.9c-0.9,0-1.7,0.4-2.3,1.1l-3.9,4.7C2.2,23.3,2,24,2,24.7V27 c0,1.7,1.3,3,3,3h22c1.7,0,3-1.3,3-3v-2.3C30,24,29.8,23.3,29.3,22.8z M8.2,19.4C8.4,19.1,8.6,19,8.9,19h14.1c0.3,0,0.6,0.1,0.8,0.4 l3,3.6H5.1L8.2,19.4z"></path> <g> <path d="M16.4,1.1c-0.3-0.1-0.6-0.1-0.9,0l-5.9,3L16,6.9l6.4-2.8L16.4,1.1z"></path> <path d="M9,12c0,0.4,0.2,0.7,0.6,0.9l5.4,2.7v-7L9,6V12z"></path> <path d="M17,8.6v7l5.4-2.7c0.3-0.2,0.6-0.5,0.6-0.9V6L17,8.6z"></path> </g> </g></svg>
      <h4 class="font-medium text-sm text-blue-500">Build Dynamic Websites</h4>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transform" :class="{ 'rotate-180': openSection === 2 }" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
    </svg>
  </div>

  <div x-show="openSection === 1" class="w-1/2 bg-white p-4 mt-4">
    <h4 class="text-sm text-slate-400">Explore the world of dynamic web development and create interactive and engaging websites.</h4>
    <button class="bg-blue-500 p-2 text-sm text-white font-bold rounded mt-4">Start Web Development</button>
  </div>

  <div @click="openSection = (openSection === 2) ? null : 2" class="p-4 bg-blue-100 w-1/2 rounded flex justify-between items-center mt-4 cursor-pointer">
    <div class="flex items-center gap-2">

      <svg viewBox="0 0 24 24" class="h-6 w-6 text-blue-500" xmlns="http://www.w3.org/2000/svg">
        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
        <g id="SVGRepo_iconCarrier">
          <path d="M12 3V21M9.99995 4L12 6L14 4M9.99995 20L12 18L14 20M4.23218 7.5L19.8206 16.5M4.11133 9.50885L6.57017 8.85L5.91133 6.39115M18.141 17.6089L17.4821 15.15L19.941 14.4912M19.8205 7.5L4.232 16.5M18.1413 6.39115L17.4825 8.85L19.9413 9.50885M4.11166 14.4911L6.57051 15.15L5.91166 17.6088" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </g>
      </svg>
      
      

      <h4 class="font-medium text-sm text-blue-500">Master Responsive Design</h4>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transform" :class="{ 'rotate-180': openSection === 2 }" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
    </svg>
  </div>

  <div x-show="openSection === 2" class="w-1/2 bg-white p-4 mt-4">
    <h4 class="text-sm text-slate-400">Discover the art of creating responsive designs that adapt seamlessly to various screen sizes and devices.</h4>
    <button class="bg-blue-500 p-2 text-sm text-white font-bold rounded mt-4">Learn Responsive Design</button>
  </div>

</div>
<script src="https://unpkg.com/alpinejs@3.13.3/dist/cdn.min.js" defer></script>