NonProfit_Retro_Accordion

<div class="p-4 sm:p-8 md:p-12 bg-gradient-to-br from-orange-100 via-stone-200 to-amber-100 dark:from-stone-900 dark:via-gray-800 dark:to-stone-700 min-h-screen font-sans">
  <div class="max-w-3xl mx-auto bg-white/70 backdrop-blur-sm rounded-xl shadow-lg overflow-hidden dark:bg-stone-800/80 transition-colors duration-500">
    <div class="p-6 sm:p-8 border-b-2 border-dashed border-orange-200 dark:border-stone-700">
      <h2 class="text-3xl sm:text-4xl font-bold text-stone-800 dark:text-orange-100 mb-2 font-serif tracking-tight">Our Mission & Impact</h2>
      <p class="text-md sm:text-lg text-gray-700 dark:text-stone-300">Explore how your contributions make a difference in our community.</p>
    </div>
    <div class="divide-y divide-orange-200/50 dark:divide-stone-700/50">
      <!-- Accordion Item 1 -->
      <div class="group relative overflow-hidden">
        <input type="checkbox" id="accordion-1" class="absolute peer opacity-0 top-0 left-0 w-full h-full cursor-pointer z-10" />
        <label for="accordion-1" class="flex items-center justify-between p-6 sm:p-8 cursor-pointer active:scale-[0.99] transition-all duration-300 select-none bg-gradient-to-r from-orange-50 to-stone-100 dark:from-stone-800 dark:to-gray-700 group-hover:from-orange-100 group-hover:to-orange-50 dark:group-hover:from-stone-700 dark:group-hover:to-gray-600">
          <h3 class="text-xl font-semibold text-stone-700 dark:text-stone-200 group-hover:text-amber-700 dark:group-hover:text-amber-500 transition-colors duration-300">What is our primary focus?</h3>
          <svg class="w-6 h-6 text-orange-500 dark:text-orange-300 transform transition-transform duration-300 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="max-h-0 peer-checked:max-h-96 transition-all duration-500 ease-in-out overflow-hidden px-6 sm:px-8 bg-stone-50 dark:bg-stone-900/50">
          <div class="py-5 text-gray-600 dark:text-stone-300 text-base leading-relaxed">
            <p class="mb-3">Our primary focus is on providing essential resources and educational opportunities to underprivileged communities. We believe in empowering individuals through knowledge and support, fostering long-term sustainable growth.</p>
            <img src="https://picsum.photos/400/250?random=1" alt="Community support scene" class="rounded-lg shadow-md mb-3 object-cover w-full h-auto max-h-48 sm:max-h-60" loading="lazy">
            <p>Through various programs, we address critical needs such as food security, access to clean water, and basic healthcare. Learn more about our initiatives <a href="#" class="text-orange-600 hover:text-orange-800 dark:text-orange-400 dark:hover:text-orange-300 underline font-medium transition-colors duration-200">here</a>.</p>
          </div>
        </div>
      </div>

      <!-- Accordion Item 2 -->
      <div class="group relative overflow-hidden">
        <input type="checkbox" id="accordion-2" class="absolute peer opacity-0 top-0 left-0 w-full h-full cursor-pointer z-10" />
        <label for="accordion-2" class="flex items-center justify-between p-6 sm:p-8 cursor-pointer active:scale-[0.99] transition-all duration-300 select-none bg-gradient-to-r from-orange-50 to-stone-100 dark:from-stone-800 dark:to-gray-700 group-hover:from-orange-100 group-hover:to-orange-50 dark:group-hover:from-stone-700 dark:group-hover:to-gray-600">
          <h3 class="text-xl font-semibold text-stone-700 dark:text-stone-200 group-hover:text-amber-700 dark:group-hover:text-amber-500 transition-colors duration-300">How can I contribute to your cause?</h3>
          <svg class="w-6 h-6 text-orange-500 dark:text-orange-300 transform transition-transform duration-300 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="max-h-0 peer-checked:max-h-96 transition-all duration-500 ease-in-out overflow-hidden px-6 sm:px-8 bg-stone-50 dark:bg-stone-900/50">
          <div class="py-5 text-gray-600 dark:text-stone-300 text-base leading-relaxed">
            <p class="mb-3">There are several ways to contribute, including direct donations, volunteering your time, or spreading awareness about our mission. Every act of kindness helps us reach more people in need.</p>
            <ul class="list-disc list-inside space-y-2 mb-4">
              <li class="flex items-start"><span class="mr-2 text-amber-600 dark:text-amber-400 font-bold text-lg">&bull;</span> Online Donation: Securely donate through our website.</li>
              <li class="flex items-start"><span class="mr-2 text-amber-600 dark:text-amber-400 font-bold text-lg">&bull;</span> Volunteer Programs: Join our dedicated team of volunteers for various events.</li>
              <li class="flex items-start"><span class="mr-2 text-amber-600 dark:text-amber-400 font-bold text-lg">&bull;</span> Corporate Partnerships: Explore collaboration opportunities for businesses.</li>
            </ul>
            <div class="flex items-center space-x-4 mb-3">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Volunteer avatar" class="w-12 h-12 rounded-full border-2 border-orange-300 dark:border-stone-600" loading="lazy">
              <p class="text-sm text-gray-500 dark:text-stone-400">"My experience volunteering has been incredibly rewarding." - John, Volunteer</p>
            </div>
            <button class="px-5 py-2 mt-2 bg-gradient-to-r from-orange-500 to-amber-600 text-white rounded-lg shadow-md hover:from-orange-600 hover:to-amber-700 focus:outline-none focus:ring-2 focus:ring-orange-400 focus:ring-opacity-75 transition-all duration-300 text-sm sm:text-base">Donate Now</button>
          </div>
        </div>
      </div>

      <!-- Accordion Item 3 -->
      <div class="group relative overflow-hidden">
        <input type="checkbox" id="accordion-3" class="absolute peer opacity-0 top-0 left-0 w-full h-full cursor-pointer z-10" />
        <label for="accordion-3" class="flex items-center justify-between p-6 sm:p-8 cursor-pointer active:scale-[0.99] transition-all duration-300 select-none bg-gradient-to-r from-orange-50 to-stone-100 dark:from-stone-800 dark:to-gray-700 group-hover:from-orange-100 group-hover:to-orange-50 dark:group-hover:from-stone-700 dark:group-hover:to-gray-600">
          <h3 class="text-xl font-semibold text-stone-700 dark:text-stone-200 group-hover:text-amber-700 dark:group-hover:text-amber-500 transition-colors duration-300">What impact have we made so far?</h3>
          <svg class="w-6 h-6 text-orange-500 dark:text-orange-300 transform transition-transform duration-300 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="max-h-0 peer-checked:max-h-96 transition-all duration-500 ease-in-out overflow-hidden px-6 sm:px-8 bg-stone-50 dark:bg-stone-900/50">
          <div class="py-5 text-gray-600 dark:text-stone-300 text-base leading-relaxed">
            <p class="mb-3">Since our inception, we have positively impacted thousands of lives. Here are some key achievements:</p>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
              <div class="bg-stone-100 dark:bg-stone-800 p-4 rounded-lg shadow-sm">
                <p class="text-2xl font-bold text-amber-600 dark:text-amber-400">15,000+</p>
                <p class="text-sm text-gray-700 dark:text-stone-300">Meals provided annually</p>
              </div>
              <div class="bg-stone-100 dark:bg-stone-800 p-4 rounded-lg shadow-sm">
                <p class="text-2xl font-bold text-amber-600 dark:text-amber-400">5,000+</p>
                <p class="text-sm text-gray-700 dark:text-stone-300">Children educated</p>
              </div>
              <div class="bg-stone-100 dark:bg-stone-800 p-4 rounded-lg shadow-sm">
                <p class="text-2xl font-bold text-amber-600 dark:text-amber-400">100+</p>
                <p class="text-sm text-gray-700 dark:text-stone-300">Community projects</p>
              </div>
              <div class="bg-stone-100 dark:bg-stone-800 p-4 rounded-lg shadow-sm">
                <p class="text-2xl font-bold text-amber-600 dark:text-amber-400">500+</p>
                <p class="text-sm text-gray-700 dark:text-stone-300">Active volunteers</p>
              </div>
            </div>
            <img src="https://picsum.photos/400/250?random=2" alt="Impact statistics infographic" class="rounded-lg shadow-md mb-3 object-cover w-full h-auto max-h-48 sm:max-h-60" loading="lazy">
            <p class="text-gray-700 dark:text-stone-300 text-sm italic">"Your support directly translates into tangible change."</p>
          </div>
        </div>
      </div>

    </div>
    <div class="p-6 sm:p-8 bg-gradient-to-t from-orange-100 via-stone-100 to-white dark:from-stone-800 dark:via-gray-700 to-stone-700 rounded-b-xl">
      <p class="text-center text-gray-600 dark:text-stone-400 text-sm sm:text-base">Together, we can build a better future.</p>
    </div>
  </div>
</div>