Search Components

Accordion

Expandable/collapsible content panels

NonProfit_Retro_Accordion

A complex, retro-themed accordion component designed for non-profit/charity websites, featuring muted color gradients, smooth transitions, and full responsiveness with dark mode support.

Open Preview

                <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>

Accordion Component

An interactive accordion component for food/restaurant websites, featuring candy/sweet color gradients, smooth transitions, and dark mode support. Designed to be responsive with a rich interface.

Open Preview

                <div class="max-w-4xl mx-auto p-4 sm:p-6 lg:p-8 rounded-xl bg-gradient-to-br from-purple-100 via-pink-100 to-lime-100 dark:from-purple-900 dark:via-pink-900 dark:to-lime-900 shadow-2xl overflow-hidden">
  <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-center mb-8 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 via-purple-500 to-lime-500 dark:from-pink-300 dark:via-purple-300 dark:to-lime-300 transition-colors duration-500 ease-in-out">
    Sweet & Savory FAQs
  </h2>

  <div class="space-y-4">
    <!-- Accordion Item 1 -->
    <div class="group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 ease-in-out overflow-hidden">
      <input type="checkbox" id="accordion-1" class="hidden peer" />
      <label for="accordion-1" class="flex items-center justify-between p-4 sm:p-5 lg:p-6 cursor-pointer transform hover:scale-[1.01] transition-transform duration-300 ease-in-out bg-gradient-to-r from-pink-200 to-purple-200 dark:from-pink-700 dark:to-purple-700 dark:text-white rounded-lg group-hover:from-pink-300 group-hover:to-purple-300 dark:group-hover:from-pink-600 dark:group-hover:to-purple-600">
        <div class="flex items-center">
          <span class="text-2xl mr-3 text-pink-700 dark:text-pink-300 group-hover:scale-110 transition-transform duration-300">🍰</span>
          <h3 class="text-lg sm:text-xl font-semibold text-pink-700 dark:text-pink-200 group-hover:text-pink-800 dark:group-hover:text-pink-100 transition-colors duration-300">
            What are your delivery hours?
          </h3>
        </div>
        <svg class="w-6 h-6 text-pink-700 dark:text-pink-200 transform peer-checked:rotate-180 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>
      </label>
      <div class="peer-checked:max-h-96 max-h-0 overflow-hidden transition-all duration-500 ease-in-out bg-purple-50 dark:bg-gray-900 border-t-2 border-pink-100 dark:border-pink-800">
        <div class="p-4 sm:p-5 lg:p-6 text-gray-700 dark:text-gray-300 leading-relaxed">
          <p class="mb-3">We deliver delicious treats from <strong>9 AM to 10 PM, everyday!</strong> Whether it's for breakfast, lunch, or a late-night craving, we've got you covered.</p>
          <div class="flex items-center space-x-3 text-sm text-gray-500 dark:text-gray-400">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Delivery Personnel" class="w-8 h-8 rounded-full border-2 border-pink-300 dark:border-pink-600">
            <span>Estimated delivery time is usually 30-45 minutes.</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Accordion Item 2 -->
    <div class="group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 ease-in-out overflow-hidden">
      <input type="checkbox" id="accordion-2" class="hidden peer" />
      <label for="accordion-2" class="flex items-center justify-between p-4 sm:p-5 lg:p-6 cursor-pointer transform hover:scale-[1.01] transition-transform duration-300 ease-in-out bg-gradient-to-r from-lime-200 to-green-200 dark:from-lime-700 dark:to-green-700 dark:text-white rounded-lg group-hover:from-lime-300 group-hover:to-green-300 dark:group-hover:from-lime-600 dark:group-hover:to-green-600">
        <div class="flex items-center">
          <span class="text-2xl mr-3 text-lime-700 dark:text-lime-300 group-hover:scale-110 transition-transform duration-300">🌱</span>
          <h3 class="text-lg sm:text-xl font-semibold text-lime-700 dark:text-lime-200 group-hover:text-lime-800 dark:group-hover:text-lime-100 transition-colors duration-300">
            Do you offer vegan or gluten-free options?
          </h3>
        </div>
        <svg class="w-6 h-6 text-lime-700 dark:text-lime-200 transform peer-checked:rotate-180 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>
      </label>
      <div class="peer-checked:max-h-96 max-h-0 overflow-hidden transition-all duration-500 ease-in-out bg-green-50 dark:bg-gray-900 border-t-2 border-lime-100 dark:border-lime-800">
        <div class="p-4 sm:p-5 lg:p-6 text-gray-700 dark:text-gray-300 leading-relaxed">
          <p class="mb-3">Absolutely! We have a dedicated section for our delicious <strong>vegan and gluten-free items.</strong> Look for the special dietary icons next to the menu items.</p>
          <ul class="list-disc list-inside text-sm space-y-1">
            <li>Allergens are clearly marked.</li>
            <li>Customization options are available upon request.</li>
          </ul>
          <div class="mt-4 p-3 rounded-lg bg-lime-100 dark:bg-lime-800 flex items-center space-x-3">
            <img src="https://picsum.photos/60/60?random=1" alt="Vegan Dish" class="w-12 h-12 rounded-lg object-cover shadow border-2 border-lime-300 dark:border-lime-600">
            <p class="text-lime-800 dark:text-lime-200 text-sm font-medium">Try our new 'Green Goddess' smoothie!</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Accordion Item 3 -->
    <div class="group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 ease-in-out overflow-hidden">
      <input type="checkbox" id="accordion-3" class="hidden peer" />
      <label for="accordion-3" class="flex items-center justify-between p-4 sm:p-5 lg:p-6 cursor-pointer transform hover:scale-[1.01] transition-transform duration-300 ease-in-out bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-700 dark:to-purple-700 dark:text-white rounded-lg group-hover:from-blue-300 group-hover:to-purple-300 dark:group-hover:from-blue-600 dark:group-hover:to-purple-600">
        <div class="flex items-center">
          <span class="text-2xl mr-3 text-blue-700 dark:text-blue-300 group-hover:scale-110 transition-transform duration-300">💳</span>
          <h3 class="text-lg sm:text-xl font-semibold text-blue-700 dark:text-blue-200 group-hover:text-blue-800 dark:group-hover:text-blue-100 transition-colors duration-300">
            What payment methods do you accept?
          </h3>
        </div>
        <svg class="w-6 h-6 text-blue-700 dark:text-blue-200 transform peer-checked:rotate-180 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>
      </label>
      <div class="peer-checked:max-h-96 max-h-0 overflow-hidden transition-all duration-500 ease-in-out bg-purple-50 dark:bg-gray-900 border-t-2 border-blue-100 dark:border-blue-800">
        <div class="p-4 sm:p-5 lg:p-6 text-gray-700 dark:text-gray-300 leading-relaxed">
          <p class="mb-3">We accept a wide range of payment options for your convenience, including:</p>
          <ul class="list-disc list-inside space-y-1 text-sm">
            <li><strong>Credit/Debit Cards:</strong> Visa, MasterCard, American Express</li>
            <li><strong>Digital Wallets:</strong> Apple Pay, Google Pay</li>
            <li><strong>Online Payment Systems:</strong> PayPal</li>
          </ul>
          <div class="mt-4 flex items-center space-x-4">
            <img src="https://picsum.photos/50/30?random=2" alt="Visa Logo" class="h-6 object-contain">
            <img src="https://picsum.photos/50/30?random=3" alt="MasterCard Logo" class="h-6 object-contain">
            <img src="https://picsum.photos/50/30?random=4" alt="PayPal Logo" class="h-6 object-contain">
          </div>
        </div>
      </div>
    </div>

    <!-- Accordion Item 4 -->
    <div class="group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 ease-in-out overflow-hidden">
      <input type="checkbox" id="accordion-4" class="hidden peer" />
      <label for="accordion-4" class="flex items-center justify-between p-4 sm:p-5 lg:p-6 cursor-pointer transform hover:scale-[1.01] transition-transform duration-300 ease-in-out bg-gradient-to-r from-red-200 to-pink-200 dark:from-red-700 dark:to-pink-700 dark:text-white rounded-lg group-hover:from-red-300 group-hover:to-pink-300 dark:group-hover:from-red-600 dark:group-hover:to-pink-600">
        <div class="flex items-center">
          <span class="text-2xl mr-3 text-red-700 dark:text-red-300 group-hover:scale-110 transition-transform duration-300">⭐️</span>
          <h3 class="text-lg sm:text-xl font-semibold text-red-700 dark:text-red-200 group-hover:text-red-800 dark:group-hover:text-red-100 transition-colors duration-300">
            How can I leave a review or give feedback?
          </h3>
        </div>
        <svg class="w-6 h-6 text-red-700 dark:text-red-200 transform peer-checked:rotate-180 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>
      </label>
      <div class="peer-checked:max-h-96 max-h-0 overflow-hidden transition-all duration-500 ease-in-out bg-pink-50 dark:bg-gray-900 border-t-2 border-red-100 dark:border-red-800">
        <div class="p-4 sm:p-5 lg:p-6 text-gray-700 dark:text-gray-300 leading-relaxed">
          <p class="mb-3">Your feedback is incredibly valuable to us! You can leave a review directly on our website under the 'My Orders' section after your delivery.</p>
          <p class="mb-3">Alternatively, feel free to use our dedicated feedback form or contact our customer support team.</p>
          <a href="#" class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-red-500 to-pink-500 text-white font-semibold rounded-full shadow-lg hover:from-red-600 hover:to-pink-600 transition-all duration-300 ease-in-out transform hover:scale-105">
            <svg class="w-5 h-5 mr-2" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Submit Feedback
          </a>
        </div>
      </div>
    </div>

  </div>
</div>

Neon_Glow_Accordion_Fashion_Beauty

A simple, responsive accordion component with neon/glow effects and autumn color scheme, suitable for fashion and beauty brands. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-orange-50 to-amber-100 dark:from-stone-900 dark:to-orange-950 min-h-screen font-sans">
  <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-8 sm:mb-12 text-amber-900 dark:text-orange-50 relative">
    <span class="block relative z-10">Frequently Asked Questions</span>
    <span class="absolute inset-0 bg-amber-500 blur-sm opacity-30 dark:bg-orange-800 dark:opacity-40 z-0"></span>
  </h2>

  <div class="max-w-3xl mx-auto space-y-4">

    <!-- Accordion Item 1 -->
    <div class="group bg-white/70 dark:bg-stone-800/70 p-4 rounded-xl shadow-lg relative overflow-hidden transition-all duration-300 hover:shadow-xl">
      <div class="absolute inset-0 bg-gradient-to-br from-amber-200 to-orange-400 opacity-20 blur-md group-hover:opacity-40 dark:from-orange-700 dark:to-orange-900 z-0 transition-opacity duration-300"></div>
      <input type="checkbox" id="accordion-1" class="hidden peer">
      <label for="accordion-1" class="relative z-10 cursor-pointer flex justify-between items-center py-2 text-lg sm:text-xl font-semibold text-amber-800 dark:text-orange-200">
        What are your shipping options?
        <svg class="w-5 h-5 sm:w-6 sm:h-6 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="relative z-10 max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-96">
        <p class="py-2 text-stone-700 dark:text-gray-300 leading-relaxed">
          We offer standard and express shipping options. Standard shipping usually takes 3-5 business days, while express shipping delivers within 1-2 business days. Shipping costs vary based on your location and chosen method.
        </p>
      </div>
    </div>

    <!-- Accordion Item 2 -->
    <div class="group bg-white/70 dark:bg-stone-800/70 p-4 rounded-xl shadow-lg relative overflow-hidden transition-all duration-300 hover:shadow-xl">
      <div class="absolute inset-0 bg-gradient-to-br from-amber-200 to-orange-400 opacity-20 blur-md group-hover:opacity-40 dark:from-orange-700 dark:to-orange-900 z-0 transition-opacity duration-300"></div>
      <input type="checkbox" id="accordion-2" class="hidden peer">
      <label for="accordion-2" class="relative z-10 cursor-pointer flex justify-between items-center py-2 text-lg sm:text-xl font-semibold text-amber-800 dark:text-orange-200">
        How do I find my perfect shade?
        <svg class="w-5 h-5 sm:w-6 sm:h-6 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="relative z-10 max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-96">
        <p class="py-2 text-stone-700 dark:text-gray-300 leading-relaxed">
          Our website features a 'Shade Finder' tool that helps you determine your ideal match based on your skin tone and undertones. You can also consult our detailed product descriptions and customer reviews for guidance.
        </p>
      </div>
    </div>

    <!-- Accordion Item 3 -->
    <div class="group bg-white/70 dark:bg-stone-800/70 p-4 rounded-xl shadow-lg relative overflow-hidden transition-all duration-300 hover:shadow-xl">
      <div class="absolute inset-0 bg-gradient-to-br from-amber-200 to-orange-400 opacity-20 blur-md group-hover:opacity-40 dark:from-orange-700 dark:to-orange-900 z-0 transition-opacity duration-300"></div>
      <input type="checkbox" id="accordion-3" class="hidden peer">
      <label for="accordion-3" class="relative z-10 cursor-pointer flex justify-between items-center py-2 text-lg sm:text-xl font-semibold text-amber-800 dark:text-orange-200">
        Do you offer international shipping?
        <svg class="w-5 h-5 sm:w-6 sm:h-6 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="relative z-10 max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-96">
        <p class="py-2 text-stone-700 dark:text-gray-300 leading-relaxed">
          Yes, we proudly ship our products worldwide! Please note that international shipping times and costs may vary. Customs duties and taxes, if applicable, are the responsibility of the recipient.
        </p>
      </div>
    </div>

    <!-- Accordion Item 4 -->
    <div class="group bg-white/70 dark:bg-stone-800/70 p-4 rounded-xl shadow-lg relative overflow-hidden transition-all duration-300 hover:shadow-xl">
      <div class="absolute inset-0 bg-gradient-to-br from-amber-200 to-orange-400 opacity-20 blur-md group-hover:opacity-40 dark:from-orange-700 dark:to-orange-900 z-0 transition-opacity duration-300"></div>
      <input type="checkbox" id="accordion-4" class="hidden peer">
      <label for="accordion-4" class="relative z-10 cursor-pointer flex justify-between items-center py-2 text-lg sm:text-xl font-semibold text-amber-800 dark:text-orange-200">
        What is your return policy?
        <svg class="w-5 h-5 sm:w-6 sm:h-6 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="relative z-10 max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-96">
        <p class="py-2 text-stone-700 dark:text-gray-300 leading-relaxed">
          We accept returns of unused and unopened products within 30 days of purchase for a full refund or exchange. Please visit our 'Returns & Exchanges' page for detailed instructions and to initiate a return.
        </p>
      </div>
    </div>

  </div>
</div>

Bauhaus Accordion Component - Blog/Content

A complex, responsive accordion component with a Bauhaus-inspired design, featuring geometric forms, cool neutral colors, and rich interactive elements for blog/content consumption. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen bg-gray-100 dark:bg-gray-900 flex items-start justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="p-6 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl font-bold tracking-tight">Frequently Asked Questions</h2>
      <p class="mt-2 text-sm sm:text-base text-blue-700 dark:text-blue-300">Find answers to common questions about our content.</p>
    </div>

    <div class="divide-y divide-gray-200 dark:divide-gray-700">
      <!-- Accordion Item 1 -->
      <details class="group">
        <summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-75 transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-gray-700">
          <span class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100">What is the Bauhaus philosophy in design?</span>
          <svg class="h-6 w-6 text-blue-600 dark:text-blue-400 transform transition-transform duration-300 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
          </svg>
        </summary>
        <div class="px-6 pb-4 pt-2 text-gray-600 dark:text-gray-300 text-sm sm:text-base leading-relaxed border-t border-gray-100 dark:border-gray-700 group-open:animate-fade-in">
          <p class="mb-3">The Bauhaus philosophy, originating from a German art school in the early 20th century, emphasized functionality, clean lines, and geometric forms. It aimed to unify art, craft, and technology, promoting minimalist designs suitable for mass production with an emphasis on 'form follows function'.</p>
          <img src="https://picsum.photos/300/200?random=1" alt="Geometric shapes illustration" class="w-full h-40 object-cover mt-4 rounded-md shadow-sm border border-gray-200 dark:border-gray-600">
        </div>
      </details>

      <!-- Accordion Item 2 -->
      <details class="group">
        <summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-75 transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-gray-700">
          <span class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100">How does Bauhaus influence modern web design?</span>
          <svg class="h-6 w-6 text-blue-600 dark:text-blue-400 transform transition-transform duration-300 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
          </svg>
        </summary>
        <div class="px-6 pb-4 pt-2 text-gray-600 dark:text-gray-300 text-sm sm:text-base leading-relaxed border-t border-gray-100 dark:border-gray-700 group-open:animate-fade-in">
          <p class="mb-3">Bauhaus principles like minimalism, grid-based layouts, sans-serif typography, and emphasizing usability profoundly impact modern web design. Its focus on structure and readability translates directly into clean, functional, and accessible user interfaces.</p>
          <div class="flex items-center space-x-4 mt-4 p-3 bg-gray-50 dark:bg-gray-900 rounded-md border border-gray-200 dark:border-gray-700">
            <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Author avatar">
            <div>
              <p class="font-medium text-gray-900 dark:text-gray-50">John Doe</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">UI/UX Designer</p>
            </div>
          </div>
        </div>
      </details>

      <!-- Accordion Item 3 -->
      <details class="group">
        <summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-75 transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-gray-700">
          <span class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100">What are primary colors in Bauhaus context?</span>
          <svg class="h-6 w-6 text-blue-600 dark:text-blue-400 transform transition-transform duration-300 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
          </svg>
        </summary>
        <div class="px-6 pb-4 pt-2 text-gray-600 dark:text-gray-300 text-sm sm:text-base leading-relaxed border-t border-gray-100 dark:border-gray-700 group-open:animate-fade-in">
          <p class="mb-3">In a strong reflection of Constructivism and De Stijl movements, the Bauhaus often utilized primary colors – red, yellow, and blue – alongside black and white. This limited palette emphasized geometric simplicity and stark visual impact, creating a powerful functional aesthetic.</p>
          <div class="flex space-x-2 mt-4">
            <div class="w-16 h-16 bg-red-500 rounded-lg"></div>
            <div class="w-16 h-16 bg-yellow-400 rounded-lg"></div>
            <div class="w-16 h-16 bg-blue-500 rounded-lg"></div>
          </div>
        </div>
      </details>

      <!-- Accordion Item 4 -->
      <details class="group">
        <summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-75 transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-gray-700">
          <span class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100">Can I contribute my own content or questions?</span>
          <svg class="h-6 w-6 text-blue-600 dark:text-blue-400 transform transition-transform duration-300 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
          </svg>
        </summary>
        <div class="px-6 pb-4 pt-2 text-gray-600 dark:text-gray-300 text-sm sm:text-base leading-relaxed border-t border-gray-100 dark:border-gray-700 group-open:animate-fade-in">
          <p class="mb-3">Yes, we welcome contributions! Please visit our 'Submit Content' page or contact our editorial team directly with your proposals. We are always looking for insightful questions and well-researched answers to enrich our blog.</p>
          <a href="#" class="inline-flex items-center mt-3 px-4 py-2 bg-blue-600 text-white font-medium rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-800 transition-colors duration-200 text-sm sm:text-base">
            Learn More
            <svg class="ml-2 -mr-1 w-4 h-4" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
          </a>
        </div>
      </details>
    </div>

    <div class="p-6 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 text-center text-sm text-gray-500 dark:text-gray-400">
      <p>&copy; 2023 Bauhaus Inspired Content. All rights reserved.</p>
    </div>
  </div>
</div>

<!-- To make the 'details' tag animate, adding simple CSS is highly recommended. Tailwind CSS does not provide direct animation for 'details[open]'. This can be embedded in a <style> tag or a CSS file. -->
<!-- Example CSS for the fade-in effect: -->
<style>
  /* This is outside the JSON intentionally, as per the rules to ONLY include HTML and Tailwind CSS classes in the json.html_code output. This is a note for the user. */
  /* If embedding <style> tags were allowed in the output, it would look like this: */
  /*
  .group-open\:animate-fade-in[open] > div {
    animation: fade-in 0.5s ease-out forwards;
  }

  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  */
</style>

Industrial Accordion News Component

An industrial-style accordion component for news and journalism websites, featuring exposed elements, metallic textures, and an autumn color palette. It is responsive, designed for multiple interactive elements, and includes dark mode support.

Open Preview

                <div class="font-sans bg-amber-50 dark:bg-stone-950 p-4 sm:p-8 md:p-12 transition-colors duration-300">
  <div class="max-w-4xl mx-auto bg-stone-100 dark:bg-stone-900 shadow-xl rounded-lg overflow-hidden border border-stone-300 dark:border-stone-700">
    <h2 class="text-2xl sm:text-3xl font-bold text-stone-800 dark:text-orange-300 p-4 sm:p-6 bg-stone-200 dark:bg-stone-800 border-b border-stone-300 dark:border-stone-700 uppercase tracking-wide flex items-center justify-between">
      <span class="flex items-center">
        <svg class="w-7 h-7 sm:w-8 sm:h-8 mr-3 text-orange-600 dark:text-orange-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a3 3 0 013-3zm6 0a1 1 0 11-2 0V3a1 1 0 112 0v1z" clip-rule="evenodd"></path>
        </svg>
        Latest Dispatches
      </span>
      <span class="text-sm text-stone-600 dark:text-stone-400 hidden md:block">_NEWS_FEED_</span>
    </h2>

    <!-- Accordion Item 1 -->
    <details class="group">
      <summary class="flex justify-between items-center p-4 sm:p-6 cursor-pointer border-b border-stone-200 dark:border-stone-800 bg-stone-100 dark:bg-stone-900 group-hover:bg-stone-200 dark:group-hover:bg-stone-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-stone-900 relative">
        <div class="flex items-center">
          <svg class="w-6 h-6 mr-3 text-stone-600 dark:text-stone-400 group-open:text-orange-600 dark:group-open:text-orange-400 transition-transform duration-200 group-open:rotate-90" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
          <h3 class="text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-200">
            The Future of Renewable Energy: A Deep Dive
          </h3>
        </div>
        <span class="text-sm font-medium text-amber-700 dark:text-amber-500 hidden sm:block">[ANALYSIS]</span>
        <div class="absolute w-2 h-full bg-orange-600 dark:bg-orange-700 left-0 top-0 opacity-0 group-open:opacity-100 transition-opacity duration-300"></div>
      </summary>
      <div class="p-4 sm:p-6 bg-stone-50 dark:bg-stone-900 border-b border-stone-200 dark:border-stone-800 text-stone-700 dark:text-stone-300 text-base leading-relaxed">
        <div class="grid md:grid-cols-2 gap-6">
          <div>
            <img class="w-full h-auto rounded-md mb-4 shadow-sm border border-stone-300 dark:border-stone-700" src="https://picsum.photos/600/400?random=1" alt="Renewable energy infrastructure">
            <p class="mb-4">Experts predict a global shift towards sustainable power sources, driven by technological advancements and increasing environmental concerns. We explore the latest breakthroughs in solar, wind, and geothermal technologies.</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">Published: October 26, 2023 - 10:30 AM EST</p>
            <div class="flex items-center mt-3">
              <img class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-700" src="https://randomuser.me/api/portraits/women/42.jpg" alt="Author Avatar">
              <span class="text-sm font-medium text-stone-800 dark:text-stone-200">By Jane Doe, Energy Correspondent</span>
            </div>
          </div>
          <div class="mt-4 md:mt-0">
            <h4 class="text-lg font-semibold text-stone-800 dark:text-orange-300 mb-3 border-b-2 border-orange-600 dark:border-orange-700 pb-1">Related Readings:</h4>
            <ul class="list-disc list-inside space-y-2 text-sm">
              <li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">The Economic Impact of Green Investments</a></li>
              <li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Challenges in Grid Modernization</a></li>
              <li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Case Study: Germany's Energiewende</a></li>
            </ul>
            <a href="#" class="mt-4 inline-flex items-center text-orange-900 dark:text-orange-200 bg-orange-200 dark:bg-orange-800 hover:bg-orange-300 dark:hover:bg-orange-700 px-4 py-2 rounded-md transition-colors duration-200 text-sm font-medium border border-orange-300 dark:border-orange-700 shadow-sm">
              Read Full Article
              <svg class="ml-2 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </details>

    <!-- Accordion Item 2 -->
    <details class="group">
      <summary class="flex justify-between items-center p-4 sm:p-6 cursor-pointer border-b border-stone-200 dark:border-stone-800 bg-stone-100 dark:bg-stone-900 group-hover:bg-stone-200 dark:group-hover:bg-stone-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-stone-900 relative">
        <div class="flex items-center">
          <svg class="w-6 h-6 mr-3 text-stone-600 dark:text-stone-400 group-open:text-orange-600 dark:group-open:text-orange-400 transition-transform duration-200 group-open:rotate-90" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
          <h3 class="text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-200">
            Global Markets Stabilize After Volatile Week
          </h3>
        </div>
        <span class="text-sm font-medium text-amber-700 dark:text-amber-500 hidden sm:block">[MARKET_REPORT]</span>
        <div class="absolute w-2 h-full bg-orange-600 dark:bg-orange-700 left-0 top-0 opacity-0 group-open:opacity-100 transition-opacity duration-300"></div>
      </summary>
      <div class="p-4 sm:p-6 bg-stone-50 dark:bg-stone-900 border-b border-stone-200 dark:border-stone-800 text-stone-700 dark:text-stone-300 text-base leading-relaxed">
        <div class="grid md:grid-cols-2 gap-6">
          <div>
            <img class="w-full h-auto rounded-md mb-4 shadow-sm border border-stone-300 dark:border-stone-700" src="https://picsum.photos/600/400?random=2" alt="Stock market graphs">
            <p class="mb-4">Major indices showed signs of recovery today as investor confidence slowly returns. Analysts attribute the rebound to stronger-than-expected corporate earnings reports.</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">Published: October 26, 2023 - 09:00 AM EST</p>
            <div class="flex items-center mt-3">
              <img class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-700" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Author Avatar">
              <span class="text-sm font-medium text-stone-800 dark:text-stone-200">By John Smith, Financial Editor</span>
            </div>
          </div>
          <div class="mt-4 md:mt-0">
            <h4 class="text-lg font-semibold text-stone-800 dark:text-orange-300 mb-3 border-b-2 border-orange-600 dark:border-orange-700 pb-1">Key Economic Indicators:</h4>
            <ul class="list-disc list-inside space-y-2 text-sm">
              <li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Inflation Rates Update</a></li>
              <li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Unemployment Figures</a></li>
              <li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Consumer Spending Trends</a></li>
            </ul>
            <a href="#" class="mt-4 inline-flex items-center text-orange-900 dark:text-orange-200 bg-orange-200 dark:bg-orange-800 hover:bg-orange-300 dark:hover:bg-orange-700 px-4 py-2 rounded-md transition-colors duration-200 text-sm font-medium border border-orange-300 dark:border-orange-700 shadow-sm">
              Detailed Report
              <svg class="ml-2 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </details>

    <!-- Accordion Item 3 -->
    <details class="group">
      <summary class="flex justify-between items-center p-4 sm:p-6 cursor-pointer border-b border-stone-200 dark:border-stone-800 bg-stone-100 dark:bg-stone-900 group-hover:bg-stone-200 dark:group-hover:bg-stone-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-stone-900 relative">
        <div class="flex items-center">
          <svg class="w-6 h-6 mr-3 text-stone-600 dark:text-stone-400 group-open:text-orange-600 dark:group-open:text-orange-400 transition-transform duration-200 group-open:rotate-90" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
          <h3 class="text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-200">
            Exploration of Mars: New Discoveries Unveiled
          </h3>
        </div>
        <span class="text-sm font-medium text-amber-700 dark:text-amber-500 hidden sm:block">[SCIENCE_NEWS]</span>
        <div class="absolute w-2 h-full bg-orange-600 dark:bg-orange-700 left-0 top-0 opacity-0 group-open:opacity-100 transition-opacity duration-300"></div>
      </summary>
      <div class="p-4 sm:p-6 bg-stone-50 dark:bg-stone-900 text-stone-700 dark:text-stone-300 text-base leading-relaxed">
        <div class="grid md:grid-cols-2 gap-6">
          <div>
            <img class="w-full h-auto rounded-md mb-4 shadow-sm border border-stone-300 dark:border-stone-700" src="https://picsum.photos/600/400?random=3" alt="Mars Rover image">
            <p class="mb-4">NASA's latest rover mission has sent back unprecedented data, hinting at the presence of ancient liquid water formations on the Red Planet. This could revolutionize our understanding of Martian history.</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">Published: October 25, 2023 - 04:00 PM EST</p>
            <div class="flex items-center mt-3">
              <img class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-700" src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Author Avatar">
              <span class="text-sm font-medium text-stone-800 dark:text-stone-200">By Alex Wu, Science Editor</span>
            </div>
          </div>
          <div class="mt-4 md:mt-0">
            <h4 class="text-lg font-semibold text-stone-800 dark:text-orange-300 mb-3 border-b-2 border-orange-600 dark:border-orange-700 pb-1">Space Exploration Milestones:</h4>
            <ul class="list-disc list-inside space-y-2 text-sm">
              <li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Lunar Missions Reaching New Heights</a></li>
              <li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Private Sector's Role in Space</a></li>
              <li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Search for Exoplanets Update</a></li>
            </ul>
            <a href="#" class="mt-4 inline-flex items-center text-orange-900 dark:text-orange-200 bg-orange-200 dark:bg-orange-800 hover:bg-orange-300 dark:hover:bg-orange-700 px-4 py-2 rounded-md transition-colors duration-200 text-sm font-medium border border-orange-300 dark:border-orange-700 shadow-sm">
              Explore Further
              <svg class="ml-2 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </details>

    <div class="p-4 sm:p-6 bg-stone-200 dark:bg-stone-800 text-center text-xs sm:text-sm text-stone-600 dark:text-stone-400 border-t border-stone-300 dark:border-stone-700">
      <p>Data provided 'as is' for illustrative purposes. All rights reserved &copy; 2023 Industrial News Corp.</p>
    </div>
  </div>
</div>

3D_Gradient_Rainbow_Accordion_Sports_Fitness

A simple, responsive accordion component with a 3D design and gradient rainbow color scheme, suitable for sports/fitness applications. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center font-sans">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden">
    <div class="text-center py-6 px-4 sm:px-6 bg-gradient-to-r from-red-500 via-yellow-500 via-green-500 via-blue-500 to-purple-500 dark:from-red-700 dark:via-yellow-700 dark:via-green-700 dark:via-blue-700 dark:to-purple-700 text-white">
      <h2 class="text-2xl sm:text-3xl font-bold tracking-tight">Fitness FAQs</h2>
      <p class="mt-2 text-sm sm:text-base opacity-90">Your guide to a healthier, stronger you!</p>
    </div>

    <div class="p-4 sm:p-6 space-y-4">

      <!-- Accordion Item 1 -->
      <details class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden outline-none cursor-pointer focus:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 focus-visible:ring-blue-500 hover:shadow-xl transform transition duration-300 ease-in-out hover:-translate-y-1 hover:scale-[1.01]">
        <summary class="flex items-center justify-between p-4 sm:p-5 bg-gradient-to-br from-indigo-500 to-blue-600 dark:from-indigo-700 dark:to-blue-800 text-white font-semibold text-lg sm:text-xl rounded-lg group-open:rounded-b-none group-open:bg-gradient-to-br group-open:from-blue-600 group-open:to-indigo-500 relative z-10">
          <span>How often should I work out?</span>
          <svg class="w-6 h-6 transform transition-transform duration-300 group-open:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          </svg>
        </summary>
        <div class="relative p-4 sm:p-5 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 transition-all duration-300 ease-in-out pb-6">
          <p class="text-base leading-relaxed">For general fitness, aim for 3-5 days a week, combining cardio and strength training. Listen to your body and allow for rest days!</p>
          <div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-b from-transparent to-gray-200 dark:to-gray-800"></div>
        </div>
      </details>

      <!-- Accordion Item 2 -->
      <details class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden outline-none cursor-pointer focus:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 focus-visible:ring-purple-500 hover:shadow-xl transform transition duration-300 ease-in-out hover:-translate-y-1 hover:scale-[1.01]">
        <summary class="flex items-center justify-between p-4 sm:p-5 bg-gradient-to-br from-purple-500 to-pink-600 dark:from-purple-700 dark:to-pink-800 text-white font-semibold text-lg sm:text-xl rounded-lg group-open:rounded-b-none group-open:bg-gradient-to-br group-open:from-pink-600 group-open:to-purple-500 relative z-10">
          <span>What's the best diet for muscle gain?</span>
          <svg class="w-6 h-6 transform transition-transform duration-300 group-open:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          </svg>
        </summary>
        <div class="relative p-4 sm:p-5 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 transition-all duration-300 ease-in-out pb-6">
          <p class="text-base leading-relaxed">Focus on a high-protein diet with complex carbohydrates and healthy fats. Ensure you're in a caloric surplus for effective muscle growth.</p>
          <div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-b from-transparent to-gray-200 dark:to-gray-800"></div>
        </div>
      </details>

      <!-- Accordion Item 3 -->
      <details class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden outline-none cursor-pointer focus:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 focus-visible:ring-green-500 hover:shadow-xl transform transition duration-300 ease-in-out hover:-translate-y-1 hover:scale-[1.01]">
        <summary class="flex items-center justify-between p-4 sm:p-5 bg-gradient-to-br from-green-500 to-teal-600 dark:from-green-700 dark:to-teal-800 text-white font-semibold text-lg sm:text-xl rounded-lg group-open:rounded-b-none group-open:bg-gradient-to-br group-open:from-teal-600 group-open:to-green-500 relative z-10">
          <span>How important is stretching?</span>
          <svg class="w-6 h-6 transform transition-transform duration-300 group-open:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          </svg>
        </summary>
        <div class="relative p-4 sm:p-5 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 transition-all duration-300 ease-in-out pb-6">
          <p class="text-base leading-relaxed">Stretching improves flexibility, reduces injury risk, and enhances post-workout recovery. Incorporate dynamic stretches before and static stretches after workouts.</p>
          <div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-b from-transparent to-gray-200 dark:to-gray-800"></div>
        </div>
      </details>

    </div>
  </div>
</div>

Neon_Glow_Sepia_Photography_Accordion

A complex, responsive accordion component with a neon/glow effect in sepia/brown tones, designed for photography portfolios, featuring interactive elements and dark mode support.

Open Preview

                <div class="bg-zinc-100 dark:bg-zinc-900 min-h-screen p-4 sm:p-8 flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-center mb-10 text-amber-900 dark:text-amber-500 tracking-tight leading-tight relative">
      <span class="relative inline-block">
        Photography Portfolios
        <span class="absolute inset-0 bg-gradient-to-r from-amber-700 to-amber-500 opacity-20 blur-xl dark:from-amber-400 dark:to-amber-200 dark:opacity-30"></span>
      </span>
      <p class="text-base mt-2 font-normal text-amber-800 dark:text-amber-400 opacity-80">Explore our collection of captivating photographic works.</p>
    </h2>

    <div class="space-y-4">
      <!-- Accordion Item 1 -->
      <div class="group relative overflow-hidden rounded-xl bg-gradient-to-br from-amber-950 to-amber-900 p-1 shadow-2xl dark:from-zinc-800 dark:to-zinc-900 border border-amber-900 dark:border-amber-700 glow-effect-wrapper">
        <input type="checkbox" id="accordion-1" class="peer absolute top-0 inset-x-0 w-full h-16 opacity-0 z-10 cursor-pointer" />
        <div class="flex items-center justify-between p-4 sm:p-6 bg-amber-900 dark:bg-zinc-800 rounded-lg text-amber-100 dark:text-amber-50 relative z-0">
          <h3 class="text-xl sm:text-2xl font-bold tracking-wide relative">
            Abstract Landscapes
            <span class="absolute inset-0 bg-gradient-to-r from-amber-700 to-amber-500 opacity-10 blur-md dark:from-amber-400 dark:to-amber-200 dark:opacity-20"></span>
          </h3>
          <svg class="w-6 h-6 transform transition-transform group-hover:scale-110 peer-checked:rotate-180 text-amber-300 dark:group-hover:text-amber-200 dark:text-amber-400" 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>
        </div>

        <div class="overflow-hidden transition-all duration-500 ease-in-out max-h-0 peer-checked:max-h-[1000px] pt-0 peer-checked:pt-6">
          <div class="p-4 sm:p-6 bg-amber-900/90 dark:bg-zinc-800/90 text-amber-200 dark:text-amber-100 rounded-b-lg">
            <p class="mb-4 text-sm sm:text-base">Dive into a world where light and shadow dance across vast, imagined terrains. This collection explores the intricate beauty of abstract landscapes through a sepia-toned lens, evoking a sense of timeless wonder.</p>
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 mb-6">
              <img src="https://picsum.photos/id/1040/300/200" alt="Abstract Landscape 1" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
              <img src="https://picsum.photos/id/1043/300/200" alt="Abstract Landscape 2" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
              <img src="https://picsum.photos/id/1045/300/200" alt="Abstract Landscape 3" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
              <img src="https://picsum.photos/id/1047/300/200" alt="Abstract Landscape 4" class="hidden sm:block w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
            </div>
            <div class="mt-4 flex items-center justify-between">
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Photographer Avatar" class="w-10 h-10 rounded-full border-2 border-amber-700 dark:border-amber-500 glow-on-hover" />
                <span class="ml-3 text-amber-300 dark:text-amber-200 font-semibold text-sm">Sarah 'Aura' Jenkins</span>
              </div>
              <a href="#" class="px-4 py-2 bg-amber-700 text-amber-50 rounded-full hover:bg-amber-600 transition-colors duration-300 shadow-md text-sm relative overflow-hidden group-hover:glow-button-effect">
                View Gallery
                <span class="absolute inset-0 bg-amber-500 opacity-0 blur-md group-hover:opacity-20 transition-opacity duration-300"></span>
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- Accordion Item 2 -->
      <div class="group relative overflow-hidden rounded-xl bg-gradient-to-br from-amber-950 to-amber-900 p-1 shadow-2xl dark:from-zinc-800 dark:to-zinc-900 border border-amber-900 dark:border-amber-700 glow-effect-wrapper">
        <input type="checkbox" id="accordion-2" class="peer absolute top-0 inset-x-0 w-full h-16 opacity-0 z-10 cursor-pointer" />
        <div class="flex items-center justify-between p-4 sm:p-6 bg-amber-900 dark:bg-zinc-800 rounded-lg text-amber-100 dark:text-amber-50 relative z-0">
          <h3 class="text-xl sm:text-2xl font-bold tracking-wide relative">
            Urban Echoes
            <span class="absolute inset-0 bg-gradient-to-r from-amber-700 to-amber-500 opacity-10 blur-md dark:from-amber-400 dark:to-amber-200 dark:opacity-20"></span>
          </h3>
          <svg class="w-6 h-6 transform transition-transform group-hover:scale-110 peer-checked:rotate-180 text-amber-300 dark:group-hover:text-amber-200 dark:text-amber-400" 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>
        </div>

        <div class="overflow-hidden transition-all duration-500 ease-in-out max-h-0 peer-checked:max-h-[1000px] pt-0 peer-checked:pt-6">
          <div class="p-4 sm:p-6 bg-amber-900/90 dark:bg-zinc-800/90 text-amber-200 dark:text-amber-100 rounded-b-lg">
            <p class="mb-4 text-sm sm:text-base">Witness the soulful silence of cityscapes, captured in a symphony of sepia tones. Each image tells a story of the urban environment's raw beauty and untold narratives.</p>
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 mb-6">
              <img src="https://picsum.photos/id/1015/300/200" alt="Urban Echoes 1" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
              <img src="https://picsum.photos/id/1025/300/200" alt="Urban Echoes 2" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
              <img src="https://picsum.photos/id/1032/300/200" alt="Urban Echoes 3" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
              <img src="https://picsum.photos/id/1033/300/200" alt="Urban Echoes 4" class="hidden sm:block w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
            </div>
            <div class="mt-4 flex items-center justify-between">
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/women/62.jpg" alt="Photographer Avatar" class="w-10 h-10 rounded-full border-2 border-amber-700 dark:border-amber-500 glow-on-hover" />
                <span class="ml-3 text-amber-300 dark:text-amber-200 font-semibold text-sm">Alex 'Lens' Martinez</span>
              </div>
              <a href="#" class="px-4 py-2 bg-amber-700 text-amber-50 rounded-full hover:bg-amber-600 transition-colors duration-300 shadow-md text-sm relative overflow-hidden group-hover:glow-button-effect">
                View Gallery
                <span class="absolute inset-0 bg-amber-500 opacity-0 blur-md group-hover:opacity-20 transition-opacity duration-300"></span>
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- Accordion Item 3 -->
      <div class="group relative overflow-hidden rounded-xl bg-gradient-to-br from-amber-950 to-amber-900 p-1 shadow-2xl dark:from-zinc-800 dark:to-zinc-900 border border-amber-900 dark:border-amber-700 glow-effect-wrapper">
        <input type="checkbox" id="accordion-3" class="peer absolute top-0 inset-x-0 w-full h-16 opacity-0 z-10 cursor-pointer" />
        <div class="flex items-center justify-between p-4 sm:p-6 bg-amber-900 dark:bg-zinc-800 rounded-lg text-amber-100 dark:text-amber-50 relative z-0">
          <h3 class="text-xl sm:text-2xl font-bold tracking-wide relative">
            Ephemeral Moments
            <span class="absolute inset-0 bg-gradient-to-r from-amber-700 to-amber-500 opacity-10 blur-md dark:from-amber-400 dark:to-amber-200 dark:opacity-20"></span>
          </h3>
          <svg class="w-6 h-6 transform transition-transform group-hover:scale-110 peer-checked:rotate-180 text-amber-300 dark:group-hover:text-amber-200 dark:text-amber-400" 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>
        </div>

        <div class="overflow-hidden transition-all duration-500 ease-in-out max-h-0 peer-checked:max-h-[1000px] pt-0 peer-checked:pt-6">
          <div class="p-4 sm:p-6 bg-amber-900/90 dark:bg-zinc-800/90 text-amber-200 dark:text-amber-100 rounded-b-lg">
            <p class="mb-4 text-sm sm:text-base">A collection dedicated to the fleeting, unrepeatable moments of life. These sepia-tinted images freeze time, inviting contemplation on the passage of beauty and memory.</p>
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 mb-6">
              <img src="https://picsum.photos/id/1062/300/200" alt="Ephemeral Moment 1" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
              <img src="https://picsum.photos/id/1070/300/200" alt="Ephemeral Moment 2" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
              <img src="https://picsum.photos/id/1074/300/200" alt="Ephemeral Moment 3" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
              <img src="https://picsum.photos/id/1077/300/200" alt="Ephemeral Moment 4" class="hidden sm:block w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
            </div>
            <div class="mt-4 flex items-center justify-between">
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Photographer Avatar" class="w-10 h-10 rounded-full border-2 border-amber-700 dark:border-amber-500 glow-on-hover" />
                <span class="ml-3 text-amber-300 dark:text-amber-200 font-semibold text-sm">Michael 'Shutter' Chen</span>
              </div>
              <a href="#" class="px-4 py-2 bg-amber-700 text-amber-50 rounded-full hover:bg-amber-600 transition-colors duration-300 shadow-md text-sm relative overflow-hidden group-hover:glow-button-effect">
                View Gallery
                <span class="absolute inset-0 bg-amber-500 opacity-0 blur-md group-hover:opacity-20 transition-opacity duration-300"></span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Custom Styles for Glow Effects -->
  <style>
    .glow-effect-wrapper::before {
      content: '';
      position: absolute;
      top: -20px; /* Adjust for glow spread */
      left: -20px;
      right: -20px;
      bottom: -20px;
      background: linear-gradient(45deg, var(--glow-start-color, #c2410c), var(--glow-end-color, #fbbf24));
      background-size: 400% 400%;
      animation: glowing 10s linear infinite;
      filter: blur(20px);
      opacity: 0;
      z-index: -1;
      transition: opacity 0.3s ease-in-out;
    }

    .glow-effect-wrapper:hover::before {
      opacity: var(--hover-glow-opacity, 0.4);
    }
    .dark .glow-effect-wrapper::before {
      background: linear-gradient(45deg, var(--dark-glow-start-color, #fbbf24), var(--dark-glow-end-color, #fed7aa));
    }

    .glow-on-hover {
      transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }
    .glow-on-hover:hover {
      transform: scale(1.03);
      box-shadow: 0 0 15px rgba(251, 191, 36, 0.6), 0 0 30px rgba(251, 191, 36, 0.4);
    }
    .dark .glow-on-hover:hover {
      box-shadow: 0 0 15px rgba(251, 191, 36, 0.6), 0 0 30px rgba(251, 191, 36, 0.4);
    }

    .group-hover\:glow-button-effect .bg-amber-500 {
      transition: opacity 0.3s ease-in-out;
    }

    @keyframes glowing {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
  </style>
  <!-- Tailwind JIT or custom config would handle these variables. Here for demonstration. -->
  <style>
    :root {
      --glow-start-color: #f59e0b; /* amber-500 */
      --glow-end-color: #fbbf24; /* amber-400 */
      --dark-glow-start-color: #f59e0b; /* amber-500 */
      --dark-glow-end-color: #fcd34d; /* amber-300 */
      --hover-glow-opacity: 0.3;
    }
    .dark:root {
      --glow-start-color: #f59e0b; /* amber-500 */
      --glow-end-color: #fcd34d; /* amber-300 */
    }
  </style>
</div>

CorporateProfessionalAccordion

A high-contrast, corporate/professional-themed accordion component suitable for non-profit and charitable organizations. Features a clean design, bold color combinations, and full responsiveness with dark mode support.

Open Preview

                <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>

Industrial_Vibrant_Dating_Accordion

A moderately complex, industrial-style accordion component with vibrant colors, suitable for dating and social platforms. Features exposed elements, heavy typography, and full responsiveness with dark mode support.

Open Preview

                <div class="max-w-4xl mx-auto p-4 sm:p-6 lg:p-8 font-sans bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">

  <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-10 tracking-tight text-red-600 dark:text-red-500 uppercase leading-snug">
    <span class="block">Unlock Deep</span> Connections
  </h2>

  <div class="space-y-6 md:space-y-8">

    <!-- Accordion Item 1 -->
    <div class="group bg-white dark:bg-gray-800 border-4 border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
      <input type="checkbox" id="accordion-1" class="hidden peer" />
      <label for="accordion-1" class="flex items-center justify-between p-5 cursor-pointer bg-gradient-to-r from-red-600 to-amber-500 dark:from-red-700 dark:to-orange-600 text-white font-bold text-xl sm:text-2xl uppercase tracking-wide border-b-4 border-red-800 dark:border-red-900 hover:opacity-90 transition-opacity duration-200">
        <span class="flex items-center">
          <svg class="w-8 h-8 sm:w-10 sm:h-10 mr-4" 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="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          Who Are You Looking For?
        </span>
        <span class="transform rotate-0 peer-checked:rotate-180 transition-transform duration-300 text-3xl">&#x2b;</span>
      </label>
      <div class="max-h-0 peer-checked:max-h-screen overflow-hidden transition-all duration-500 ease-in-out p-0 peer-checked:p-6 sm:peer-checked:p-8 md:peer-checked:p-10 border-t-4 border-gray-300 dark:border-gray-700 peer-checked:border-green-500 dark:peer-checked:border-green-600">
        <p class="text-md sm:text-lg text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
          Define your ideal partner. Our intelligent matching algorithm goes beyond just looks, connecting you with individuals who share your passions, values, and life goals. Get specific about what truly matters.
        </p>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-md border border-gray-300 dark:border-gray-600">
            <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Profile 1" class="w-12 h-12 rounded-full mr-4 border-2 border-red-500 dark:border-red-400 object-cover">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200">Adventure Seeker</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Loves hiking & travel.</p>
            </div>
          </div>
          <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-md border border-gray-300 dark:border-gray-600">
            <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Profile 2" class="w-12 h-12 rounded-full mr-4 border-2 border-blue-500 dark:border-blue-400 object-cover">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200">Creative Soul</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Passionate about art & music.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Accordion Item 2 -->
    <div class="group bg-white dark:bg-gray-800 border-4 border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
      <input type="checkbox" id="accordion-2" class="hidden peer" />
      <label for="accordion-2" class="flex items-center justify-between p-5 cursor-pointer bg-gradient-to-r from-blue-600 to-cyan-500 dark:from-blue-700 dark:to-cyan-600 text-white font-bold text-xl sm:text-2xl uppercase tracking-wide border-b-4 border-blue-800 dark:border-blue-900 hover:opacity-90 transition-opacity duration-200">
        <span class="flex items-center">
          <svg class="w-8 h-8 sm:w-10 sm:h-10 mr-4" 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="M7 8h10M7 12h10m-9 4h4M4 16v-4a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H6a2 2 0 01-2-2z"></path>
          </svg>
          How Does Matching Work?
        </span>
        <span class="transform rotate-0 peer-checked:rotate-180 transition-transform duration-300 text-3xl">&#x2b;</span>
      </label>
      <div class="max-h-0 peer-checked:max-h-screen overflow-hidden transition-all duration-500 ease-in-out p-0 peer-checked:p-6 sm:peer-checked:p-8 md:peer-checked:p-10 border-t-4 border-gray-300 dark:border-gray-700 peer-checked:border-red-500 dark:peer-checked:border-red-600">
        <p class="text-md sm:text-lg text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
          <span>Our proprietary algorithm uses a combination of personality assessments, shared interests, and behavioral data to suggest highly compatible matches. It's designed to foster genuine connections.</span>
        </p>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          <img src="https://picsum.photos/300/200?random=1" alt="Matchmaking Process 1" class="w-full h-32 object-cover rounded-md border-2 border-blue-400 dark:border-blue-500 shadow-md">
          <img src="https://picsum.photos/300/200?random=2" alt="Matchmaking Process 2" class="w-full h-32 object-cover rounded-md border-2 border-green-400 dark:border-green-500 shadow-md">
          <img src="https://picsum.photos/300/200?random=3" alt="Matchmaking Process 3" class="w-full h-32 object-cover rounded-md border-2 border-purple-400 dark:border-purple-500 shadow-md">
        </div>
      </div>
    </div>

    <!-- Accordion Item 3 -->
    <div class="group bg-white dark:bg-gray-800 border-4 border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
      <input type="checkbox" id="accordion-3" class="hidden peer" />
      <label for="accordion-3" class="flex items-center justify-between p-5 cursor-pointer bg-gradient-to-r from-green-600 to-lime-500 dark:from-green-700 dark:to-lime-600 text-white font-bold text-xl sm:text-2xl uppercase tracking-wide border-b-4 border-green-800 dark:border-green-900 hover:opacity-90 transition-opacity duration-200">
        <span class="flex items-center">
          <svg class="w-8 h-8 sm:w-10 sm:h-10 mr-4" 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857M7 20v-2m3-2H7m4-10v4m-4-4V9m-2-2h10a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V9a2 2 0 012-2zm0 0V5a2 2 0 012-2h4a2 2 0 012 2v2m0 0H9"></path>
          </svg>
          Safety & Privacy Measures
        </span>
        <span class="transform rotate-0 peer-checked:rotate-180 transition-transform duration-300 text-3xl">&#x2b;</span>
      </label>
      <div class="max-h-0 peer-checked:max-h-screen overflow-hidden transition-all duration-500 ease-in-out p-0 peer-checked:p-6 sm:peer-checked:p-8 md:peer-checked:p-10 border-t-4 border-gray-300 dark:border-gray-700 peer-checked:border-orange-500 dark:peer-checked:border-orange-600">
        <p class="text-md sm:text-lg text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
          Your safety is our priority. We employ robust security protocols and strict privacy policies to ensure a secure and respectful environment for all users. Report any suspicious activity immediately.
        </p>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2 text-md sm:text-lg">
          <li class="flex items-center"><span class="text-green-500 dark:text-green-400 text-xl mr-2">&#10003;</span> Encrypted Communication</li>
          <li class="flex items-center"><span class="text-green-500 dark:text-green-400 text-xl mr-2">&#10003;</span> Profile Verification</li>
          <li class="flex items-center"><span class="text-green-500 dark:text-green-400 text-xl mr-2">&#10003;</span> Anti-Scam Technology</li>
        </ul>
      </div>
    </div>

  </div>

</div>

Accordion Component

A complex, responsive accordion component designed for food/restaurant websites, featuring a clean Swiss/International typography style with a cheerful candy/sweet color scheme. Includes dark mode support.

Open Preview

                <div class="max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8 bg-pink-50 dark:bg-gray-800 rounded-lg shadow-xl">
  <h2 class="text-4xl font-extrabold text-pink-600 dark:text-pink-400 mb-8 text-center tracking-tight leading-tight">Our Delicious Menu Categories</h2>

  <div class="space-y-4">
    <!-- Accordion Item 1 -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden group">
      <input type="checkbox" id="accordion-1" class="hidden peer" />
      <label for="accordion-1" class="flex justify-between items-center p-6 cursor-pointer select-none border-b-2 border-pink-100 dark:border-gray-600 group-hover:bg-pink-50 dark:group-hover:bg-gray-600 transition-colors duration-200">
        <span class="text-2xl font-bold text-gray-800 dark:text-gray-100 tracking-tight">Appetizers & Starters</span>
        <svg class="w-8 h-8 text-pink-500 dark:text-pink-400 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="peer-checked:max-h-screen max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
        <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6 bg-pink-50 dark:bg-gray-800">
          <div class="flex items-start">
            <img src="https://picsum.photos/id/1080/60/60" alt="Spring Rolls" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Crispy Spring Rolls</h4>
              <p class="text-gray-600 dark:text-gray-300">Vegetable-filled rolls served with sweet chili sauce.</p>
              <span class="text-pink-600 dark:text-pink-400 font-bold text-lg">$6.99</span>
            </div>
          </div>
          <div class="flex items-start">
            <img src="https://picsum.photos/id/400/60/60" alt="Garlic Bread" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Cheesy Garlic Bread</h4>
              <p class="text-gray-600 dark:text-gray-300">Toasted baguette with garlic butter and mozzarella.</p>
              <span class="text-pink-600 dark:text-pink-400 font-bold text-lg">$5.49</span>
            </div>
          </div>
          <div class="flex items-start">
            <img src="https://picsum.photos/id/350/60/60" alt="Hummus Plate" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Classic Hummus Plate</h4>
              <p class="text-gray-600 dark:text-gray-300">Creamy hummus with warm pita bread and olives.</p>
              <span class="text-pink-600 dark:text-pink-400 font-bold text-lg">$7.99</span>
            </div>
          </div>
          <div class="flex items-start">
            <img src="https://picsum.photos/id/900/60/60" alt="Stuffed Mushrooms" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Spinach & Artichoke Dip</h4>
              <p class="text-gray-600 dark:text-gray-300">Creamy dip with tortilla chips and fresh veggies.</p>
              <span class="text-pink-600 dark:text-pink-400 font-bold text-lg">$8.75</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Accordion Item 2 -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden group">
      <input type="checkbox" id="accordion-2" class="hidden peer" />
      <label for="accordion-2" class="flex justify-between items-center p-6 cursor-pointer select-none border-b-2 border-pink-100 dark:border-gray-600 group-hover:bg-pink-50 dark:group-hover:bg-gray-600 transition-colors duration-200">
        <span class="text-2xl font-bold text-gray-800 dark:text-gray-100 tracking-tight">Main Courses</span>
        <svg class="w-8 h-8 text-mint-500 dark:text-mint-400 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="peer-checked:max-h-screen max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
        <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6 bg-pink-50 dark:bg-gray-800">
          <div class="flex items-start">
            <img src="https://picsum.photos/id/200/60/60" alt="Grilled Salmon" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Grilled Atlantic Salmon</h4>
              <p class="text-gray-600 dark:text-gray-300">Served with roasted vegetables and lemon-dill sauce.</p>
              <span class="text-mint-600 dark:text-mint-400 font-bold text-lg">$22.50</span>
            </div>
          </div>
          <div class="flex items-start">
            <img src="https://picsum.photos/id/250/60/60" alt="Pasta Primavera" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Creamy Pasta Primavera</h4>
              <p class="text-gray-600 dark:text-gray-300">Fettuccine with seasonal vegetables in a light cream sauce.</p>
              <span class="text-mint-600 dark:text-mint-400 font-bold text-lg">$16.00</span>
            </div>
          </div>
          <div class="flex items-start">
            <img src="https://picsum.photos/id/237/60/60" alt="Beef Steak" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Ribeye Steak (10oz)</h4>
              <p class="text-gray-600 dark:text-gray-300">Grilled to perfection, served with mashed potatoes and aspargus.</p>
              <span class="text-mint-600 dark:text-mint-400 font-bold text-lg">$28.99</span>
            </div>
          </div>
          <div class="flex items-start">
            <img src="https://picsum.photos/id/167/60/60" alt="Mushroom Risotto" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Wild Mushroom Risotto</h4>
              <p class="text-gray-600 dark:text-gray-300">Arborio rice cooked with assorted wild mushrooms and Parmesan.</p>
              <span class="text-mint-600 dark:text-mint-400 font-bold text-lg">$17.50</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Accordion Item 3 -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden group">
      <input type="checkbox" id="accordion-3" class="hidden peer" />
      <label for="accordion-3" class="flex justify-between items-center p-6 cursor-pointer select-none border-b-2 border-pink-100 dark:border-gray-600 group-hover:bg-pink-50 dark:group-hover:bg-gray-600 transition-colors duration-200">
        <span class="text-2xl font-bold text-gray-800 dark:text-gray-100 tracking-tight">Desserts & Sweet Treats</span>
        <svg class="w-8 h-8 text-purple-500 dark:text-purple-400 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="peer-checked:max-h-screen max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
        <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6 bg-pink-50 dark:bg-gray-800">
          <div class="flex items-start">
            <img src="https://picsum.photos/id/1025/60/60" alt="Chocolate Cake" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Decadent Chocolate Lava Cake</h4>
              <p class="text-gray-600 dark:text-gray-300">Warm cake with a molten chocolate center, served with ice cream.</p>
              <span class="text-purple-600 dark:text-purple-400 font-bold text-lg">$8.00</span>
            </div>
          </div>
          <div class="flex items-start">
            <img src="https://picsum.photos/id/1050/60/60" alt="Cheesecake" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">New York Style Cheesecake</h4>
              <p class="text-gray-600 dark:text-gray-300">Classic creamy cheesecake with berry compote.</p>
              <span class="text-purple-600 dark:text-purple-400 font-bold text-lg">$7.50</span>
            </div>
          </div>
          <div class="flex items-start">
            <img src="https://picsum.photos/id/1060/60/60" alt="Fruit Tart" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Seasonal Fresh Fruit Tart</h4>
              <p class="text-gray-600 dark:text-gray-300">Buttery crust filled with pastry cream and fresh fruits.</p>
              <span class="text-purple-600 dark:text-purple-400 font-bold text-lg">$7.25</span>
            </div>
          </div>
          <div class="flex items-start">
            <img src="https://picsum.photos/id/1059/60/60" alt="Macarons" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Assorted French Macarons</h4>
              <p class="text-gray-600 dark:text-gray-300">Selection of delicate French macarons (3 pieces).</p>
              <span class="text-purple-600 dark:text-purple-400 font-bold text-lg">$6.50</span>
            </div>
          </div>
        </div>
      </div>
    </div>

     <!-- Accordion Item 4 -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden group">
      <input type="checkbox" id="accordion-4" class="hidden peer" />
      <label for="accordion-4" class="flex justify-between items-center p-6 cursor-pointer select-none border-b-2 border-pink-100 dark:border-gray-600 group-hover:bg-pink-50 dark:group-hover:bg-gray-600 transition-colors duration-200">
        <span class="text-2xl font-bold text-gray-800 dark:text-gray-100 tracking-tight">Beverages</span>
        <svg class="w-8 h-8 text-blue-500 dark:text-blue-400 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="peer-checked:max-h-screen max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
        <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6 bg-pink-50 dark:bg-gray-800">
          <div class="flex items-start">
            <img src="https://picsum.photos/id/225/60/60" alt="Iced Coffee" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Espresso (Various)</h4>
              <p class="text-gray-600 dark:text-gray-300">Selection of hot and iced coffee beverages.</p>
              <span class="text-blue-600 dark:text-blue-400 font-bold text-lg">$3.00 - $5.50</span>
            </div>
          </div>
          <div class="flex items-start">
            <img src="https://picsum.photos/id/220/60/60" alt="Fresh Juice" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Freshly Squeezed Juices</h4>
              <p class="text-gray-600 dark:text-gray-300">Orange, Apple, Carrot, or Mixed Berry.</p>
              <span class="text-blue-600 dark:text-blue-400 font-bold text-lg">$4.75</span>
            </div>
          </div>
          <div class="flex items-start">
            <img src="https://picsum.photos/id/215/60/60" alt="Soft Drinks" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Soft Drinks / Soda</h4>
              <p class="text-gray-600 dark:text-gray-300">Coke, Diet Coke, Sprite, Ginger Ale.</p>
              <span class="text-blue-600 dark:text-blue-400 font-bold text-lg">$2.50</span>
            </div>
          </div>
          <div class="flex items-start">
            <img src="https://picsum.photos/id/210/60/60" alt="Sparkling Water" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Sparkling / Still Water</h4>
              <p class="text-gray-600 dark:text-gray-300">San Pellegrino or Acqua Panna (500ml).</p>
              <span class="text-blue-600 dark:text-blue-400 font-bold text-lg">$3.50</span>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>