КорпоративныйПрофессиональныйАккордеон

<div class="max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-xl">
  <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-8 text-center">Frequently Asked Questions</h2>

  <div class="space-y-4">
    <!-- Accordion Item 1 -->
    <div class="group bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden transform transition-all duration-300 hover:shadow-lg dark:hover:shadow-xl">
      <input type="checkbox" id="accordion-1" class="hidden peer" aria-expanded="false">
      <label for="accordion-1" class="flex items-center justify-between p-6 cursor-pointer select-none text-lg font-semibold text-sky-800 dark:text-sky-400 bg-sky-100 dark:bg-gray-700 transition-colors duration-300 peer-checked:bg-sky-200 dark:peer-checked:bg-gray-600 border-b-2 border-sky-200 dark:border-gray-700 peer-checked:border-sky-500 dark:peer-checked:border-sky-400">
        What is the mission of our organization?
        <svg class="w-6 h-6 text-sky-800 dark:text-sky-400 transform transition-transform duration-300 group-hover:rotate-90 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="p-6 overflow-hidden max-h-0 peer-checked:max-h-screen transition-all duration-500 ease-in-out text-gray-700 dark:text-gray-300">
        <p>Our mission is to empower communities through education, health initiatives, and sustainable development programs. We strive to create lasting positive change by addressing root causes of inequality and fostering self-reliance.</p>
      </div>
    </div>

    <!-- Accordion Item 2 -->
    <div class="group bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden transform transition-all duration-300 hover:shadow-lg dark:hover:shadow-xl">
      <input type="checkbox" id="accordion-2" class="hidden peer" aria-expanded="false">
      <label for="accordion-2" class="flex items-center justify-between p-6 cursor-pointer select-none text-lg font-semibold text-lime-800 dark:text-lime-400 bg-lime-100 dark:bg-gray-700 transition-colors duration-300 peer-checked:bg-lime-200 dark:peer-checked:bg-gray-600 border-b-2 border-lime-200 dark:border-gray-700 peer-checked:border-lime-500 dark:peer-checked:border-lime-400">
        How can I contribute or volunteer?
        <svg class="w-6 h-6 text-lime-800 dark:text-lime-400 transform transition-transform duration-300 group-hover:rotate-90 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="p-6 overflow-hidden max-h-0 peer-checked:max-h-screen transition-all duration-500 ease-in-out text-gray-700 dark:text-gray-300">
        <p>We welcome all forms of support! You can contribute by making a donation through our website, volunteering your time for our local projects, or spreading awareness about our cause. Visit our 'Get Involved' page for more details.</p>
      </div>
    </div>

    <!-- Accordion Item 3 -->
    <div class="group bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden transform transition-all duration-300 hover:shadow-lg dark:hover:shadow-xl">
      <input type="checkbox" id="accordion-3" class="hidden peer" aria-expanded="false">
      <label for="accordion-3" class="flex items-center justify-between p-6 cursor-pointer select-none text-lg font-semibold text-teal-800 dark:text-teal-400 bg-teal-100 dark:bg-gray-700 transition-colors duration-300 peer-checked:bg-teal-200 dark:peer-checked:bg-gray-600 border-b-2 border-teal-200 dark:border-gray-700 peer-checked:border-teal-500 dark:peer-checked:border-teal-400">
        Where do our donations go?
        <svg class="w-6 h-6 text-teal-800 dark:text-teal-400 transform transition-transform duration-300 group-hover:rotate-90 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="p-6 overflow-hidden max-h-0 peer-checked:max-h-screen transition-all duration-500 ease-in-out text-gray-700 dark:text-gray-300">
        <p>Every donation directly supports our programs and beneficiaries. We prioritize transparency and accountability, ensuring that at least 85% of all funds go directly to our field projects, with the remainder covering essential administrative costs.</p>
      </div>
    </div>

    <!-- Accordion Item 4 -->
    <div class="group bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden transform transition-all duration-300 hover:shadow-lg dark:hover:shadow-xl">
      <input type="checkbox" id="accordion-4" class="hidden peer" aria-expanded="false">
      <label for="accordion-4" class="flex items-center justify-between p-6 cursor-pointer select-none text-lg font-semibold text-purple-800 dark:text-purple-400 bg-purple-100 dark:bg-gray-700 transition-colors duration-300 peer-checked:bg-purple-200 dark:peer-checked:bg-gray-600 border-b-2 border-purple-200 dark:border-gray-700 peer-checked:border-purple-500 dark:peer-checked:border-purple-400">
        How can I get updates on your impact?
        <svg class="w-6 h-6 text-purple-800 dark:text-purple-400 transform transition-transform duration-300 group-hover:rotate-90 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="p-6 overflow-hidden max-h-0 peer-checked:max-h-screen transition-all duration-500 ease-in-out text-gray-700 dark:text-gray-300">
        <p>We regularly share impact reports, success stories, and financial statements on our website. You can also subscribe to our newsletter to receive monthly updates directly in your inbox and follow us on social media.</p>
      </div>
    </div>
  </div>
</div>