搜索组件

类别

组件手风琴

手风琴

显示内容的弹出窗口

Dark Mode Accordion （金融/银行）

一个简单的、单色的、深色主题的折叠面板组件，专为金融和银行界面而设计。它具有响应式设计和深色模式支持，使用单一颜色的阴影以获得干净的外观。

                <div class="max-w-3xl mx-auto p-4 sm:p-6 lg:p-8 bg-gray-900 dark:bg-gray-950 text-gray-100 min-h-screen">
  <h2 class="text-3xl font-bold text-center mb-8 text-blue-300 dark:text-blue-500">FAQs about Your Account</h2>

  <div class="space-y-4">

    <!-- Accordion Item 1 -->
    <details class="group">
      <summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none bg-gray-800 dark:bg-gray-800 rounded-lg shadow-md hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200">
        <span class="text-lg font-semibold text-blue-200 dark:text-blue-400">How do I check my account balance?</span>
        <svg class="h-6 w-6 text-blue-300 dark:text-blue-500 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 py-4 mt-2 bg-gray-850 dark:bg-gray-900 rounded-lg text-gray-300 dark:text-gray-400 text-base leading-relaxed">
        You can check your account balance by logging into your online banking portal, using our mobile app, or by visiting any of our ATM locations. Balances are updated in real-time.
      </div>
    </details>

    <!-- Accordion Item 2 -->
    <details class="group">
      <summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none bg-gray-800 dark:bg-gray-800 rounded-lg shadow-md hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200">
        <span class="text-lg font-semibold text-blue-200 dark:text-blue-400">What are the fees associated with my account?</span>
        <svg class="h-6 w-6 text-blue-300 dark:text-blue-500 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 py-4 mt-2 bg-gray-850 dark:bg-gray-900 rounded-lg text-gray-300 dark:text-gray-400 text-base leading-relaxed">
        Fees vary depending on your account type. Please refer to your account agreement for a detailed list of charges, or you can find a comprehensive fee schedule on our website under the 'Pricing' section.
      </div>
    </details>

    <!-- Accordion Item 3 -->
    <details class="group">
      <summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none bg-gray-800 dark:bg-gray-800 rounded-lg shadow-md hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200">
        <span class="text-lg font-semibold text-blue-200 dark:text-blue-400">How do I transfer funds between accounts?</span>
        <svg class="h-6 w-6 text-blue-300 dark:text-blue-500 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 py-4 mt-2 bg-gray-850 dark:bg-gray-900 rounded-lg text-gray-300 dark:text-gray-400 text-base leading-relaxed">
        You can easily transfer funds via our online banking platform or mobile app. Simply navigate to the 'Transfers' section, select your 'from' and 'to' accounts, enter the amount, and confirm the transaction.
      </div>
    </details>

    <!-- Accordion Item 4 -->
    <details class="group">
      <summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none bg-gray-800 dark:bg-gray-800 rounded-lg shadow-md hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200">
        <span class="text-lg font-semibold text-blue-200 dark:text-blue-400">Can I set up recurring payments?</span>
        <svg class="h-6 w-6 text-blue-300 dark:text-blue-500 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 py-4 mt-2 bg-gray-850 dark:bg-gray-900 rounded-lg text-gray-300 dark:text-gray-400 text-base leading-relaxed">
        Yes, our online banking system allows you to set up recurring payments for bills and transfers. Go to the 'Bill Pay' or 'Transfers' section and look for the option to schedule future or recurring transactions.
      </div>
    </details>

  </div>
</div>

Bauhaus Accordion 非营利组织手风琴

一个简单、响应式的手风琴组件，设计有包豪斯的影响和温暖的日落配色方案，适用于非营利组织。包括深色模式支持。

打开预览

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

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

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

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

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

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

Neumorphic Accordion

一个简单、响应迅速且兼容暗模式的手风琴组件，采用中构灰度设计，适用于投资组合部分。

打开预览

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

  <div class="group mb-4">
    <input type="checkbox" id="accordion-1" class="hidden peer" />
    <label for="accordion-1" class="flex items-center justify-between p-4 cursor-pointer rounded-xl bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-100 font-semibold text-lg
      shadow-neumorphic dark:shadow-neumorphic-dark transition duration-300 ease-in-out
      peer-checked:shadow-neumorphic-inset dark:peer-checked:shadow-neumorphic-inset-dark">
      <span>Project Alpha</span>
      <svg class="w-6 h-6 transform transition-transform duration-300 group-hover:scale-110 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
      </svg>
    </label>
    <div class="max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-40">
      <div class="p-4 pt-2 text-gray-700 dark:text-gray-300">
        <p class="mb-2 text-sm">A responsive web application built with modern front-end technologies. Focused on delivering a seamless user experience.</p>
        <img src="https://picsum.photos/400/250?random=1" alt="Project Alpha Screenshot" class="w-full h-auto rounded-lg shadow-sm mb-2">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
      </div>
    </div>
  </div>

  <div class="group mb-4">
    <input type="checkbox" id="accordion-2" class="hidden peer" />
    <label for="accordion-2" class="flex items-center justify-between p-4 cursor-pointer rounded-xl bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-100 font-semibold text-lg
      shadow-neumorphic dark:shadow-neumorphic-dark transition duration-300 ease-in-out
      peer-checked:shadow-neumorphic-inset dark:peer-checked:shadow-neumorphic-inset-dark">
      <span>Project Beta</span>
      <svg class="w-6 h-6 transform transition-transform duration-300 group-hover:scale-110 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
      </svg>
    </label>
    <div class="max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-40">
      <div class="p-4 pt-2 text-gray-700 dark:text-gray-300">
        <p class="mb-2 text-sm">Developed a robust backend API for data management and user authentication. Scalable and efficient.</p>
        <img src="https://picsum.photos/400/250?random=2" alt="Project Beta Screenshot" class="w-full h-auto rounded-lg shadow-sm mb-2">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
      </div>
    </div>
  </div>

  <div class="group">
    <input type="checkbox" id="accordion-3" class="hidden peer" />
    <label for="accordion-3" class="flex items-center justify-between p-4 cursor-pointer rounded-xl bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-100 font-semibold text-lg
      shadow-neumorphic dark:shadow-neumorphic-dark transition duration-300 ease-in-out
      peer-checked:shadow-neumorphic-inset dark:peer-checked:shadow-neumorphic-inset-dark">
      <span>Project Gamma</span>
      <svg class="w-6 h-6 transform transition-transform duration-300 group-hover:scale-110 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
      </svg>
    </label>
    <div class="max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-40">
      <div class="p-4 pt-2 text-gray-700 dark:text-gray-300">
        <p class="mb-2 text-sm">Designed and implemented UI/UX for a mobile application, focusing on intuitive navigation and visual hierarchy.</p>
        <img src="https://picsum.photos/400/250?random=3" alt="Project Gamma Screenshot" class="w-full h-auto rounded-lg shadow-sm mb-2">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
      </div>
    </div>
  </div>
</div>

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

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

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

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

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

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

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

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

Neumorphic 手风琴组件

具有 Triadic 配色方案的 Neumorphic Accordion Component 手风琴组件，适用于商业网站。它具有响应式设计，支持深色模式，完全通过 HTML 和 Tailwind CSS 实现。

打开预览

                <div class="p-6 bg-gray-200 dark:bg-gray-800 min-h-screen flex items-start justify-center">
  <div class="w-full max-w-2xl">
    <!-- Accordion Item 1 -->
    <div class="mb-4 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <input type="checkbox" id="accordion-1" class="hidden peer">
      <label for="accordion-1" class="flex items-center justify-between p-5 cursor-pointer text-gray-800 dark:text-gray-200">
        <span class="font-semibold text-lg">Our Vision</span>
        <svg class="w-6 h-6 transform transition-transform duration-300 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
        <div class="px-5 pb-5 text-gray-700 dark:text-gray-300">
          <p>At our core, we envision a future where innovative solutions empower businesses to thrive in a dynamically evolving digital landscape. We strive to be the leading partner in digital transformation, fostering growth and efficiency through cutting-edge technology and unwavering commitment to our clients' success.</p>
        </div>
      </div>
    </div>

    <!-- Accordion Item 2 -->
    <div class="mb-4 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <input type="checkbox" id="accordion-2" class="hidden peer">
      <label for="accordion-2" class="flex items-center justify-between p-5 cursor-pointer text-gray-800 dark:text-gray-200">
        <span class="font-semibold text-lg">Our Mission</span>
        <svg class="w-6 h-6 transform transition-transform duration-300 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
        <div class="px-5 pb-5 text-gray-700 dark:text-gray-300">
          <p>Our mission is to deliver tailored, high-impact digital strategies and solutions that drive tangible results for our clients. We are dedicated to continuous innovation, fostering a collaborative environment, and maintaining the highest standards of integrity and excellence in all our endeavors.</p>
        </div>
      </div>
    </div>

    <!-- Accordion Item 3 -->
    <div class="rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <input type="checkbox" id="accordion-3" class="hidden peer">
      <label for="accordion-3" class="flex items-center justify-between p-5 cursor-pointer text-gray-800 dark:text-gray-200">
        <span class="font-semibold text-lg">Our Values</span>
        <svg class="w-6 h-6 transform transition-transform duration-300 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
        <div class="px-5 pb-5 text-gray-700 dark:text-gray-300">
          <p>We are guided by a core set of values: Innovation, Integrity, Client-Centricity, and Excellence. These principles underpin every decision we make and every action we take, ensuring we consistently deliver exceptional value and build lasting relationships with our clients.</p>
        </div>
      </div>
    </div>
  </div>
</div>

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

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

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

Material Design 折叠面板

用于电子商务的 Material Design 手风琴，具有互补配色方案和深色主题支持。

打开预览

                <div class="max-w-md mx-auto my-8 bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
    <div class="accordion-item">
        <input type="checkbox" id="accordion-1" class="hidden peer">
        <label for="accordion-1" class="flex items-center justify-between p-4 cursor-pointer bg-blue-500 text-white dark:bg-blue-700 dark:text-gray-100">
            <h3 class="text-lg font-medium">Product Details</h3>
            <svg class="w-6 h-6 transform transition-transform duration-300 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
        </label>
        <div class="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
            <div class="p-4 bg-blue-100 dark:bg-blue-900 text-gray-800 dark:text-gray-200">
                <p><strong>Material:</strong> 100% Cotton</p>
                <p><strong>Care Instructions:</strong> Machine wash cold</p>
                <p><strong>Origin:</strong> Made in Vietnam</p>
            </div>
        </div>
    </div>

    <div class="accordion-item">
        <input type="checkbox" id="accordion-2" class="hidden peer">
        <label for="accordion-2" class="flex items-center justify-between p-4 cursor-pointer bg-green-500 text-white dark:bg-green-700 dark:text-gray-100">
            <h3 class="text-lg font-medium">Shipping Information</h3>
            <svg class="w-6 h-6 transform transition-transform duration-300 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
        </label>
        <div class="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
            <div class="p-4 bg-green-100 dark:bg-green-900 text-gray-800 dark:text-gray-200">
                <p><strong>Shipping Options:</strong> Standard, Express</p>
                <p><strong>Estimated Delivery:</strong> 3-5 business days</p>
                <p><strong>Tracking:</strong> Available</p>
            </div>
        </div>
    </div>

    <div class="accordion-item">
        <input type="checkbox" id="accordion-3" class="hidden peer">
        <label for="accordion-3" class="flex items-center justify-between p-4 cursor-pointer bg-orange-500 text-white dark:bg-orange-700 dark:text-gray-100">
            <h3 class="text-lg font-medium">Customer Reviews</h3>
            <svg class="w-6 h-6 transform transition-transform duration-300 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
        </label>
        <div class="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
            <div class="p-4 bg-orange-100 dark:bg-orange-900 text-gray-800 dark:text-gray-200">
                <div class="mb-2">
                    <p class="font-semibold">John Doe</p>
                    <p class="text-sm">"Great product, highly recommend!"</p>
                </div>
                <div>
                    <p class="font-semibold">Jane Smith</p>
                    <p class="text-sm">"Fast shipping and excellent quality."</p>
                </div>
            </div>
        </div>
    </div>
</div>

折叠组件

Glassmorphism 手风琴组件，为社交媒体提供鲜艳的色彩，具有具有模糊效果的磨砂玻璃状半透明元素、具有多个交互元素的丰富界面、响应式设计和深色主题支持。不需要 JavaScript 代码，只需要带有 Tailwind 类的 HTML。

打开预览

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

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

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

RetroAccordianWithEarthTones （复古手风琴与地球色调）

Retro/Vintage 手风琴组件，具有大地色调、适度的复杂度、响应式设计和深色主题支持，用于 Portfolio 目的。

打开预览

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

折叠组件

响应式折叠组件，支持深色主题、单色配色方案和产品组合网站的微交互。

打开预览

                <div class="w-full max-w-md mx-auto my-8">
  <div class="shadow-md rounded-md overflow-hidden dark:bg-gray-800">
    <div class="border-b border-gray-200 dark:border-gray-700">
      <button class="flex justify-between items-center w-full py-4 px-6 text-left text-gray-700 dark:text-gray-300 font-semibold focus:outline-none">
        <span>Section 1</span>
        <svg class="w-4 h-4 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
      </button>
      <div class="p-6 border-t border-gray-200 dark:border-gray-700" style="display: none;">
        <p class="text-gray-600 dark:text-gray-400">Content for section 1 goes here.</p>
      </div>
    </div>

    <div class="border-b border-gray-200 dark:border-gray-700">
      <button class="flex justify-between items-center w-full py-4 px-6 text-left text-gray-700 dark:text-gray-300 font-semibold focus:outline-none">
        <span>Section 2</span>
        <svg class="w-4 h-4 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
      </button>
      <div class="p-6 border-t border-gray-200 dark:border-gray-700" style="display: none;">
        <p class="text-gray-600 dark:text-gray-400">Content for section 2 goes here.</p>
      </div>
    </div>

    <div>
      <button class="flex justify-between items-center w-full py-4 px-6 text-left text-gray-700 dark:text-gray-300 font-semibold focus:outline-none">
        <span>Section 3</span>
        <svg class="w-4 h-4 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
      </button>
      <div class="p-6 border-t border-gray-200 dark:border-gray-700" style="display: none;">
        <p class="text-gray-600 dark:text-gray-400">Content for section 3 goes here.</p>
      </div>
    </div>
  </div>
</div>

例

描述

打开预览

复古仪表板手风琴

Retro/Vintage Accordion Component for Dashboard，具有互补的配色方案和复杂的复杂性。包括使用 Tailwind CSS 的响应式设计和深色主题支持。无 JavaScript。图片来自 picsum.photos 和头像来自 randomuser.me。

打开预览

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