Fisarmonica

                <div class="max-w-xl mx-auto p-4 sm:p-6 lg:p-8 bg-amber-50 dark:bg-gray-900 rounded-lg shadow-xl">
  <h2 class="text-3xl sm:text-4xl font-extrabold text-orange-700 dark:text-orange-400 mb-6 text-center tracking-tight leading-tight uppercase relative">
    <span class="block">Our Mission</span>
    <span class="absolute left-1/2 -translate-x-1/2 bottom-0 w-20 h-2 bg-red-500 dark:bg-red-700"></span>
  </h2>

  <div class="space-y-4">
    <!-- Accordion Item 1 -->
    <div x-data="{ open: false }" class="border border-orange-300 dark:border-amber-600 rounded-md overflow-hidden shadow-sm">
      <button @click="open = !open" class="flex justify-between items-center w-full p-4 text-left bg-orange-200 dark:bg-amber-700 hover:bg-orange-300 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-gray-900 transition duration-300 ease-in-out">
        <span class="font-semibold text-lg text-orange-900 dark:text-amber-100">What is our primary goal?</span>
        <svg :class="{ 'rotate-180': open, '': !open }" class="w-6 h-6 text-orange-800 dark:text-amber-200 transform transition-transform duration-300" 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>
      </button>
      <div x-show="open" x-collapse.duration.300ms class="p-4 bg-orange-50 dark:bg-amber-900 text-orange-800 dark:text-amber-200 border-t border-orange-300 dark:border-amber-600">
        <p class="text-base leading-relaxed">Our primary goal is to empower communities through sustainable initiatives, focusing on education, health, and environmental preservation.</p>
      </div>
    </div>

    <!-- Accordion Item 2 -->
    <div x-data="{ open: false }" class="border border-orange-300 dark:border-amber-600 rounded-md overflow-hidden shadow-sm">
      <button @click="open = !open" class="flex justify-between items-center w-full p-4 text-left bg-orange-200 dark:bg-amber-700 hover:bg-orange-300 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-gray-900 transition duration-300 ease-in-out">
        <span class="font-semibold text-lg text-orange-900 dark:text-amber-100">How do we achieve our impact?</span>
        <svg :class="{ 'rotate-180': open, '': !open }" class="w-6 h-6 text-orange-800 dark:text-amber-200 transform transition-transform duration-300" 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>
      </button>
      <div x-show="open" x-collapse.duration.300ms class="p-4 bg-orange-50 dark:bg-amber-900 text-orange-800 dark:text-amber-200 border-t border-orange-300 dark:border-amber-600">
        <p class="text-base leading-relaxed">We work directly with local partners, implement needs-based programs, and rely on the generosity of volunteers and donors to make a lasting difference.</p>
      </div>
    </div>

    <!-- Accordion Item 3 -->
    <div x-data="{ open: false }" class="border border-orange-300 dark:border-amber-600 rounded-md overflow-hidden shadow-sm">
      <button @click="open = !open" class="flex justify-between items-center w-full p-4 text-left bg-orange-200 dark:bg-amber-700 hover:bg-orange-300 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-gray-900 transition duration-300 ease-in-out">
        <span class="font-semibold text-lg text-orange-900 dark:text-amber-100">How can I get involved or donate?</span>
        <svg :class="{ 'rotate-180': open, '': !open }" class="w-6 h-6 text-orange-800 dark:text-amber-200 transform transition-transform duration-300" 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>
      </button>
      <div x-show="open" x-collapse.duration.300ms class="p-4 bg-orange-50 dark:bg-amber-900 text-orange-800 dark:text-amber-200 border-t border-orange-300 dark:border-amber-600">
        <p class="text-base leading-relaxed">You can volunteer your time, make a one-time donation, or set up a recurring gift. Visit our 'Get Involved' page for more details on how your support makes a difference.</p>
      </div>
    </div>
  </div>

  <div class="mt-8 text-center">
    <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-amber-50 bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-900 animate-pulse-slow transition duration-300 ease-in-out">
      <svg class="-ml-1 mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4-4m0 0l-4-4m4 4H3"></path></svg>
      Learn More & Donate
    </a>
  </div>
</div>

<!-- Alpine.js for interactivity (required for accordion functionality) -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
              

                <div class="max-w-xl mx-auto p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-inner dark:shadow-inner-dark">
  <div class="text-center mb-6">
    <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100">My Projects</h2>
    <p class="mt-2 text-md text-gray-600 dark:text-gray-300">Here's a glimpse of my recent work.</p>
  </div>

  <div class="group mb-4">
    <input type="checkbox" id="accordion-1" class="hidden peer" />
    <label for="accordion-1" class="flex items-center justify-between p-4 cursor-pointer rounded-xl bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-100 font-semibold text-lg
      shadow-neumorphic dark:shadow-neumorphic-dark transition duration-300 ease-in-out
      peer-checked:shadow-neumorphic-inset dark:peer-checked:shadow-neumorphic-inset-dark">
      <span>Project Alpha</span>
      <svg class="w-6 h-6 transform transition-transform duration-300 group-hover:scale-110 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 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-40">
      <div class="p-4 pt-2 text-gray-700 dark:text-gray-300">
        <p class="mb-2 text-sm">A responsive web application built with modern front-end technologies. Focused on delivering a seamless user experience.</p>
        <img src="https://picsum.photos/400/250?random=1" alt="Project Alpha Screenshot" class="w-full h-auto rounded-lg shadow-sm mb-2">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
      </div>
    </div>
  </div>

  <div class="group mb-4">
    <input type="checkbox" id="accordion-2" class="hidden peer" />
    <label for="accordion-2" class="flex items-center justify-between p-4 cursor-pointer rounded-xl bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-100 font-semibold text-lg
      shadow-neumorphic dark:shadow-neumorphic-dark transition duration-300 ease-in-out
      peer-checked:shadow-neumorphic-inset dark:peer-checked:shadow-neumorphic-inset-dark">
      <span>Project Beta</span>
      <svg class="w-6 h-6 transform transition-transform duration-300 group-hover:scale-110 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 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-40">
      <div class="p-4 pt-2 text-gray-700 dark:text-gray-300">
        <p class="mb-2 text-sm">Developed a robust backend API for data management and user authentication. Scalable and efficient.</p>
        <img src="https://picsum.photos/400/250?random=2" alt="Project Beta Screenshot" class="w-full h-auto rounded-lg shadow-sm mb-2">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
      </div>
    </div>
  </div>

  <div class="group">
    <input type="checkbox" id="accordion-3" class="hidden peer" />
    <label for="accordion-3" class="flex items-center justify-between p-4 cursor-pointer rounded-xl bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-100 font-semibold text-lg
      shadow-neumorphic dark:shadow-neumorphic-dark transition duration-300 ease-in-out
      peer-checked:shadow-neumorphic-inset dark:peer-checked:shadow-neumorphic-inset-dark">
      <span>Project Gamma</span>
      <svg class="w-6 h-6 transform transition-transform duration-300 group-hover:scale-110 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 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-40">
      <div class="p-4 pt-2 text-gray-700 dark:text-gray-300">
        <p class="mb-2 text-sm">Designed and implemented UI/UX for a mobile application, focusing on intuitive navigation and visual hierarchy.</p>
        <img src="https://picsum.photos/400/250?random=3" alt="Project Gamma Screenshot" class="w-full h-auto rounded-lg shadow-sm mb-2">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
      </div>
    </div>
  </div>
</div>

<!-- To make neumorphism work, you need CSS variables in your global CSS. -->
<!-- Add this to your main CSS file (e.g., style.css or a <style> tag): -->
<!--
:root {
  --shadow-light: #ffffff;
  --shadow-dark: #cccccc;
  --neumorphic-blur: 10px;
  --neumorphic-distance: 4px;
}

.dark {
  --shadow-light: #444444;
  --shadow-dark: #1a1a1a;
}

.shadow-neumorphic {
  box-shadow: var(--neumorphic-distance) var(--neumorphic-distance) var(--neumorphic-blur) var(--shadow-dark), 
              calc(-1 * var(--neumorphic-distance)) calc(-1 * var(--neumorphic-distance)) var(--neumorphic-blur) var(--shadow-light);
}

.shadow-neumorphic-dark {
  box-shadow: var(--neumorphic-distance) var(--neumorphic-distance) var(--neumorphic-blur) var(--shadow-dark), 
              calc(-1 * var(--neumorphic-distance)) calc(-1 * var(--neumorphic-distance)) var(--neumorphic-blur) var(--shadow-light);
}

.shadow-neumorphic-inset {
  box-shadow: inset var(--neumorphic-distance) var(--neumorphic-distance) var(--neumorphic-blur) var(--shadow-dark), 
              inset calc(-1 * var(--neumorphic-distance)) calc(-1 * var(--neumorphic-distance)) var(--neumorphic-blur) var(--shadow-light);
}

.shadow-neumorphic-inset-dark {
  box-shadow: inset var(--neumorphic-distance) var(--neumorphic-distance) var(--neumorphic-blur) var(--shadow-dark), 
              inset calc(-1 * var(--neumorphic-distance)) calc(-1 * var(--neumorphic-distance)) var(--neumorphic-blur) var(--shadow-light);
}

.shadow-inner {
  box-shadow: inset 3px 3px 6px rgba(0,0,0,0.1), inset -3px -3px 6px rgba(255,255,255,0.7);
}

.dark .shadow-inner-dark {
  box-shadow: inset 3px 3px 6px rgba(0,0,0,0.6), inset -3px -3px 6px rgba(255,255,255,0.05);
}
-->
              

                <div class="p-6 bg-gray-200 dark:bg-gray-800 min-h-screen flex items-start justify-center">
  <div class="w-full max-w-2xl">
    <!-- Accordion Item 1 -->
    <div class="mb-4 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <input type="checkbox" id="accordion-1" class="hidden peer">
      <label for="accordion-1" class="flex items-center justify-between p-5 cursor-pointer text-gray-800 dark:text-gray-200">
        <span class="font-semibold text-lg">Our Vision</span>
        <svg class="w-6 h-6 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 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
        <div class="px-5 pb-5 text-gray-700 dark:text-gray-300">
          <p>At our core, we envision a future where innovative solutions empower businesses to thrive in a dynamically evolving digital landscape. We strive to be the leading partner in digital transformation, fostering growth and efficiency through cutting-edge technology and unwavering commitment to our clients' success.</p>
        </div>
      </div>
    </div>

    <!-- Accordion Item 2 -->
    <div class="mb-4 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <input type="checkbox" id="accordion-2" class="hidden peer">
      <label for="accordion-2" class="flex items-center justify-between p-5 cursor-pointer text-gray-800 dark:text-gray-200">
        <span class="font-semibold text-lg">Our Mission</span>
        <svg class="w-6 h-6 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 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
        <div class="px-5 pb-5 text-gray-700 dark:text-gray-300">
          <p>Our mission is to deliver tailored, high-impact digital strategies and solutions that drive tangible results for our clients. We are dedicated to continuous innovation, fostering a collaborative environment, and maintaining the highest standards of integrity and excellence in all our endeavors.</p>
        </div>
      </div>
    </div>

    <!-- Accordion Item 3 -->
    <div class="rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <input type="checkbox" id="accordion-3" class="hidden peer">
      <label for="accordion-3" class="flex items-center justify-between p-5 cursor-pointer text-gray-800 dark:text-gray-200">
        <span class="font-semibold text-lg">Our Values</span>
        <svg class="w-6 h-6 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 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
        <div class="px-5 pb-5 text-gray-700 dark:text-gray-300">
          <p>We are guided by a core set of values: Innovation, Integrity, Client-Centricity, and Excellence. These principles underpin every decision we make and every action we take, ensuring we consistently deliver exceptional value and build lasting relationships with our clients.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Neumorphic Shadows (Light Mode) */
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #a0a0a0, -8px -8px 16px #ffffff;
  }

  /* Neumorphic Shadows (Dark Mode) */
  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #4a4a4a, -8px -8px 16px #222222;
  }

  /* Triadic Color Scheme */
  /* Using a base gray-200/gray-800 for background and text, and will imply the triadic through subtle interaction/accent colors if required for active states or borders (not explicitly drawn in this simple example, but conceptually part of the triadic palette) */
  /* For a true triadic, you might introduce a complementary hue for highlights/accents, e.g., an orange or teal if starting with purple/green. For this 
              

                <div class="max-w-md mx-auto my-8 bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
    <div class="accordion-item">
        <input type="checkbox" id="accordion-1" class="hidden peer">
        <label for="accordion-1" class="flex items-center justify-between p-4 cursor-pointer bg-blue-500 text-white dark:bg-blue-700 dark:text-gray-100">
            <h3 class="text-lg font-medium">Product Details</h3>
            <svg class="w-6 h-6 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 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
            <div class="p-4 bg-blue-100 dark:bg-blue-900 text-gray-800 dark:text-gray-200">
                <p><strong>Material:</strong> 100% Cotton</p>
                <p><strong>Care Instructions:</strong> Machine wash cold</p>
                <p><strong>Origin:</strong> Made in Vietnam</p>
            </div>
        </div>
    </div>

    <div class="accordion-item">
        <input type="checkbox" id="accordion-2" class="hidden peer">
        <label for="accordion-2" class="flex items-center justify-between p-4 cursor-pointer bg-green-500 text-white dark:bg-green-700 dark:text-gray-100">
            <h3 class="text-lg font-medium">Shipping Information</h3>
            <svg class="w-6 h-6 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 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
            <div class="p-4 bg-green-100 dark:bg-green-900 text-gray-800 dark:text-gray-200">
                <p><strong>Shipping Options:</strong> Standard, Express</p>
                <p><strong>Estimated Delivery:</strong> 3-5 business days</p>
                <p><strong>Tracking:</strong> Available</p>
            </div>
        </div>
    </div>

    <div class="accordion-item">
        <input type="checkbox" id="accordion-3" class="hidden peer">
        <label for="accordion-3" class="flex items-center justify-between p-4 cursor-pointer bg-orange-500 text-white dark:bg-orange-700 dark:text-gray-100">
            <h3 class="text-lg font-medium">Customer Reviews</h3>
            <svg class="w-6 h-6 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 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
            <div class="p-4 bg-orange-100 dark:bg-orange-900 text-gray-800 dark:text-gray-200">
                <div class="mb-2">
                    <p class="font-semibold">John Doe</p>
                    <p class="text-sm">"Great product, highly recommend!"</p>
                </div>
                <div>
                    <p class="font-semibold">Jane Smith</p>
                    <p class="text-sm">"Fast shipping and excellent quality."</p>
                </div>
            </div>
        </div>
    </div>
</div>
              

                <div class="relative min-h-screen bg-gradient-to-br from-purple-800 via-pink-600 to-red-500 dark:from-gray-900 dark:via-gray-800 dark:to-black p-8 flex items-center justify-center">
    <div class="absolute inset-0 z-0 bg-[url('https://picsum.photos/1920/1080?random=1')] bg-cover bg-center opacity-20"></div>
    <div class="absolute inset-0 z-0 backdrop-filter backdrop-blur-3xl"></div>
    <div class="relative z-10 w-full max-w-2xl bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 rounded-3xl shadow-xl overflow-hidden border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-30">
        <div class="p-8">
            <h2 class="text-4xl font-extrabold text-white dark:text-white mb-8 text-center drop-shadow-lg">Social Feed Accordion</h2>
            
            <!-- Accordion Item 1 -->
            <div class="mb-6 bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-25 backdrop-filter backdrop-blur-xl rounded-2xl overflow-hidden shadow-lg border border-white border-opacity-20 dark:border-gray-600 dark:border-opacity-30 group">
                <input type="checkbox" id="accordion-1" class="hidden peer">
                <label for="accordion-1" class="flex justify-between items-center p-6 cursor-pointer">
                    <div class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4 border-2 border-white dark:border-gray-300">
                        <h3 class="text-xl font-semibold text-white dark:text-white drop-shadow-md">Sarah J., posted a new photo</h3>
                    </div>
                    <svg class="w-6 h-6 text-white dark:text-white 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-screen overflow-hidden transition-all duration-500 ease-in-out px-6 pb-6">
                    <div class="border-t border-white border-opacity-30 dark:border-gray-500 dark:border-opacity-40 pt-4">
                        <p class="text-white text-opacity-90 dark:text-gray-200 mb-4">"Absolutely loving this view! So refreshing to be out in nature. #TravelGoals #NatureLover"</p>
                        <img src="https://picsum.photos/600/400?random=2" alt="Post Image" class="rounded-xl mb-4 w-full h-auto object-cover border border-white border-opacity-30 dark:border-gray-500">
                        <div class="flex items-center justify-between text-white text-opacity-90 dark:text-gray-300 text-sm">
                            <span class="flex items-center"><svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg> 24 Likes</span>
                            <span class="flex items-center"><svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7h2v2H5V7zm4 0h2v2H9V7zm4 0h2v2h-2V7z" clip-rule="evenodd"></path></svg> 8 Comments</span>
                        </div>
                        <div class="mt-4 flex flex-col space-y-3">
                            <div class="flex items-start">
                                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Commenter 1" class="w-8 h-8 rounded-full mr-3 border-2 border-white dark:border-gray-400">
                                <p class="text-white text-opacity-80 dark:text-gray-300"><span class="font-semibold">John D.</span>: "Stunning! Where is this place?"</p>
                            </div>
                            <div class="flex items-start">
                                <img src="https://randomuser.me/api/portraits/women/21.jpg" alt="Commenter 2" class="w-8 h-8 rounded-full mr-3 border-2 border-white dark:border-gray-400">
                                <p class="text-white text-opacity-80 dark:text-gray-300"><span class="font-semibold">Emily R.</span>: "Love your adventurous spirit!"</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Accordion Item 2 -->
            <div class="mb-6 bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-25 backdrop-filter backdrop-blur-xl rounded-2xl overflow-hidden shadow-lg border border-white border-opacity-20 dark:border-gray-600 dark:border-opacity-30 group">
                <input type="checkbox" id="accordion-2" class="hidden peer">
                <label for="accordion-2" class="flex justify-between items-center p-6 cursor-pointer">
                    <div class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4 border-2 border-white dark:border-gray-300">
                        <h3 class="text-xl font-semibold text-white dark:text-white drop-shadow-md">Mike T., shared an article</h3>
                    </div>
                    <svg class="w-6 h-6 text-white dark:text-white 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-screen overflow-hidden transition-all duration-500 ease-in-out px-6 pb-6">
                    <div class="border-t border-white border-opacity-30 dark:border-gray-500 dark:border-opacity-40 pt-4">
                        <p class="text-white text-opacity-90 dark:text-gray-200 mb-4">"Fascinating read on the future of AI. Definitely recommend checking this out. #AI #Technology"</p>
                        <div class="bg-white bg-opacity-20 dark:bg-gray-600 dark:bg-opacity-40 rounded-xl p-4 flex items-center mb-4 border border-white border-opacity-30 dark:border-gray-500">
                            <img src="https://picsum.photos/100/100?random=3" alt="Article Thumbnail" class="w-24 h-24 object-cover rounded-lg mr-4">
                            <div>
                                <h4 class="text-lg font-bold text-white dark:text-white mb-1">The Rise of Intelligent Machines</h4>
                                <p class="text-white text-opacity-80 dark:text-gray-300 text-sm">An in-depth look at the impact of AI on society and beyond.</p>
                                <a href="#" class="text-blue-200 hover:underline dark:text-blue-300 text-sm">Read More</a>
                            </div>
                        </div>
                        <div class="flex items-center justify-between text-white text-opacity-90 dark:text-gray-300 text-sm">
                            <span class="flex items-center"><svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg> 45 Likes</span>
                            <span class="flex items-center"><svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7h2v2H5V7zm4 0h2v2H9V7zm4 0h2v2h-2V7z" clip-rule="evenodd"></path></svg> 15 Comments</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Accordion Item 3 -->
            <div class="bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-25 backdrop-filter backdrop-blur-xl rounded-2xl overflow-hidden shadow-lg border border-white border-opacity-20 dark:border-gray-600 dark:border-opacity-30 group">
                <input type="checkbox" id="accordion-3" class="hidden peer">
                <label for="accordion-3" class="flex justify-between items-center p-6 cursor-pointer">
                    <div class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/women/62.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4 border-2 border-white dark:border-gray-300">
                        <h3 class="text-xl font-semibold text-white dark:text-white drop-shadow-md">Jessica L., updated her profile</h3>
                    </div>
                    <svg class="w-6 h-6 text-white dark:text-white 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-screen overflow-hidden transition-all duration-500 ease-in-out px-6 pb-6">
                    <div class="border-t border-white border-opacity-30 dark:border-gray-500 dark:border-opacity-40 pt-4">
                        <p class="text-white text-opacity-90 dark:text-gray-200 mb-4">"Excited to start a new chapter! Check out my updated bio and recent work. #NewBeginnings #CareerGoals"</p>
                        <div class="flex items-center text-white text-opacity-90 dark:text-gray-300 text-sm">
                            <span class="flex items-center"><svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg> Profile Updated</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
              

                <div class="max-w-md mx-auto rounded-lg overflow-hidden md:max-w-lg bg-gray-200 dark:bg-gray-800">
  <div class="md:flex">
    <div class="w-full">
      <div class="p-4">
        <div class="text-lg font-bold text-gray-800 dark:text-gray-100">Accordion Title 1</div>
        <div class="mt-2 text-gray-600 dark:text-gray-300 hidden">
          <p>This is the content for Accordion 1. It has some text and can include images or other elements.</p>
          <img src="https://picsum.photos/seed/picsum/400/200" alt="Accordion Image 1" class="mt-2 rounded">
        </div>
      </div>
      <div class="border-t border-gray-300 dark:border-gray-700 p-4">
        <div class="text-lg font-bold text-gray-800 dark:text-gray-100">Accordion Title 2</div>
        <div class="mt-2 text-gray-600 dark:text-gray-300 hidden">
          <p>This is the content for Accordion 2. More detailed information goes here.</p>
          <ul class="list-disc list-inside">
            <li>Feature 1</li>
            <li>Feature 2</li>
            <li>Feature 3</li>
          </ul>
        </div>
      </div>
      <div class="border-t border-gray-300 dark:border-gray-700 p-4">
        <div class="text-lg font-bold text-gray-800 dark:text-gray-100">Accordion Title 3</div>
        <div class="mt-2 text-gray-600 dark:text-gray-300 hidden">
          <p>Accordion 3 content. Final section with concluding remarks.</p>
          <img src="https://picsum.photos/seed/unsplash/400/200" alt="Accordion Image 2" class="mt-2 rounded">
        </div>
      </div>
    </div>
  </div>
</div>
              

                <div class="w-full max-w-md mx-auto my-8">
  <div class="shadow-md rounded-md overflow-hidden dark:bg-gray-800">
    <div class="border-b border-gray-200 dark:border-gray-700">
      <button class="flex justify-between items-center w-full py-4 px-6 text-left text-gray-700 dark:text-gray-300 font-semibold focus:outline-none">
        <span>Section 1</span>
        <svg class="w-4 h-4 transform transition-transform duration-300" 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>
      </button>
      <div class="p-6 border-t border-gray-200 dark:border-gray-700" style="display: none;">
        <p class="text-gray-600 dark:text-gray-400">Content for section 1 goes here.</p>
      </div>
    </div>

    <div class="border-b border-gray-200 dark:border-gray-700">
      <button class="flex justify-between items-center w-full py-4 px-6 text-left text-gray-700 dark:text-gray-300 font-semibold focus:outline-none">
        <span>Section 2</span>
        <svg class="w-4 h-4 transform transition-transform duration-300" 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>
      </button>
      <div class="p-6 border-t border-gray-200 dark:border-gray-700" style="display: none;">
        <p class="text-gray-600 dark:text-gray-400">Content for section 2 goes here.</p>
      </div>
    </div>

    <div>
      <button class="flex justify-between items-center w-full py-4 px-6 text-left text-gray-700 dark:text-gray-300 font-semibold focus:outline-none">
        <span>Section 3</span>
        <svg class="w-4 h-4 transform transition-transform duration-300" 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>
      </button>
      <div class="p-6 border-t border-gray-200 dark:border-gray-700" style="display: none;">
        <p class="text-gray-600 dark:text-gray-400">Content for section 3 goes here.</p>
      </div>
    </div>
  </div>
</div>
              

                <div></div>
              

                <div class="max-w-md mx-auto rounded-none overflow-hidden shadow-lg bg-gray-100 dark:bg-gray-800 border-4 border-purple-500 dark:border-yellow-500">
  <div class="border-b border-purple-400 dark:border-yellow-400">
    <button class="w-full px-6 py-4 text-left text-lg font-bold text-purple-700 dark:text-yellow-300 bg-purple-200 dark:bg-yellow-700 hover:bg-purple-300 dark:hover:bg-yellow-600 transition duration-300">
      Dashboard Section 1
    </button>
    <div class="px-6 py-4 text-gray-700 dark:text-gray-300">
      <p>Content for dashboard section 1. This section provides an overview of key metrics with interactive charts and graphs.</p>
      <div class="mt-4 grid grid-cols-2 gap-4">
        <div>
          <img src="https://picsum.photos/150/100" alt="Random Image" class="rounded border-2 border-purple-500 dark:border-yellow-500">
        </div>
        <div>
          <h4 class="text-md font-semibold text-purple-600 dark:text-yellow-400">Metric A</h4>
          <p class="text-sm">Value: 1200</p>
          <h4 class="text-md font-semibold text-purple-600 dark:text-yellow-400 mt-2">Metric B</h4>
          <p class="text-sm">Value: 75%</p>
        </div>
      </div>
    </div>
  </div>
  <div class="border-b border-purple-400 dark:border-yellow-400">
    <button class="w-full px-6 py-4 text-left text-lg font-bold text-purple-700 dark:text-yellow-300 bg-purple-200 dark:bg-yellow-700 hover:bg-purple-300 dark:hover:bg-yellow-600 transition duration-300">
      Dashboard Section 2
    </button>
    <div class="px-6 py-4 text-gray-700 dark:text-gray-300">
      <p>Content for dashboard section 2. Detailed reports and customizable views.</p>
        <div class="mt-4 flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-purple-500 dark:border-yellow-500">
            <div>
                <p class="font-semibold text-purple-600 dark:text-yellow-400">User Name</p>
                <p class="text-sm">Last activity: 2 hours ago</p>
            </div>
        </div>
    </div>
  </div>
    <div>
    <button class="w-full px-6 py-4 text-left text-lg font-bold text-purple-700 dark:text-yellow-300 bg-purple-200 dark:bg-yellow-700 hover:bg-purple-300 dark:hover:bg-yellow-600 transition duration-300">
      Dashboard Section 3
    </button>
    <div class="px-6 py-4 text-gray-700 dark:text-gray-300">
      <p>Content for dashboard section 3. Settings and configuration options.</p>
        <ul class="list-disc list-inside mt-2">
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
        </ul>
    </div>
  </div>
</div>
              

                <div class="accordion-item bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
  <h2 class="accordion-header mb-0" id="headingOne">
    <button
      class="accordion-button
    relative
    flex
    items-center
    w-full
    py-4
    px-5
    text-base text-gray-800 dark:text-gray-200 text-left
    bg-white dark:bg-gray-800
    border-0
    rounded-none
    transition
    focus:outline-none"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#collapseOne"
      aria-expanded="true"
      aria-controls="collapseOne"
    >
      Product Information
    </button>
  </h2>
  <div
    id="collapseOne"
    class="accordion-collapse collapse show"
    aria-labelledby="headingOne"
    data-bs-parent="#accordionExample"
  >
    <div class="accordion-body py-4 px-5 text-gray-600 dark:text-gray-400">
      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
    </div>
  </div>
</div>

<div class="accordion-item bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
  <h2 class="accordion-header mb-0" id="headingTwo">
    <button
      class="accordion-button
    collapsed
    relative
    flex
    items-center
    w-full
    py-4
    px-5
    text-base text-gray-800 dark:text-gray-200 text-left
    bg-white dark:bg-gray-800
    border-0
    rounded-none
    transition
    focus:outline-none"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#collapseTwo"
      aria-expanded="false"
      aria-controls="collapseTwo"
    >
      Shipping Details
    </button>
  </h2>
  <div
    id="collapseTwo"
    class="accordion-collapse collapse"
    aria-labelledby="headingTwo"
    data-bs-parent="#accordionExample"
  >
    <div class="accordion-body py-4 px-5 text-gray-600 dark:text-gray-400">
      This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
    </div>
  </div>
</div>

<div class="accordion-item bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
  <h2 class="accordion-header mb-0" id="headingThree">
    <button
      class="accordion-button
    collapsed
    relative
    flex
    items-center
    w-full
    py-4
    px-5
    text-base text-gray-800 dark:text-gray-200 text-left
    bg-white dark:bg-gray-800
    border-0
    rounded-none
    transition
    focus:outline-none"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#collapseThree"
      aria-expanded="false"
      aria-controls="collapseThree"
    >
      Returns and Exchanges
    </button>
  </h2>
  <div
    id="collapseThree"
    class="accordion-collapse collapse"
    aria-labelledby="headingThree"
    data-bs-parent="#accordionExample"
  >
    <div class="accordion-body py-4 px-5 text-gray-600 dark:text-gray-400">
      This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
    </div>
  </div>
</div>