아코디언

레트로어코디언WithEarthTones

레트로/빈티지 아코디언 컴포넌트는 어스 톤, 적당한 복잡성, 반응형 디자인, 포트폴리오 목적을 위한 어두운 테마 지원을 제공합니다.

                <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 with Complementary color scheme and Complex complexity(보색 구성표와 복잡한 복잡성을 가진 대시보드용 레트로/빈티지 아코디언 구성 요소). Tailwind CSS를 사용한 반응형 디자인 및 어두운 테마 지원이 포함됩니다. 자바스크립트가 없습니다. 이미지 제공 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>

아코디언 구성 요소

머티리얼 디자인이 있는 아코디언 구성 요소, Earth Tones 색 구성표, 전자 상거래를 위한 간단한 복잡성, 어두운 테마 지원으로 반응합니다.

미리보기 열기

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

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

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

레트로 빈티지 아코디언 컴포넌트

Dashboard 데이터 시각화를 위한 어스 톤이 있는 레트로/빈티지 스타일의 아코디언 구성 요소입니다. 반응형 및 어두운 테마 지원으로 중간 수준의 복잡성을 위해 설계되었습니다.

미리보기 열기

                <div class="flex flex-col p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-lg text-brown-700 dark:text-brown-300 font-bold mb-4">Dashboard</h2>
    <div class="accordion space-y-4">
        <!-- Accordion Item 1 -->
        <div class="bg-yellow-300 dark:bg-yellow-700 rounded-lg shadow-lg">
            <button class="flex justify-between w-full p-4 text-left text-brown-900 dark:text-gray-200">  
                <span>Item 1</span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-0 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" /></svg>
            </button>
            <div class="p-4 bg-yellow-200 dark:bg-yellow-600 hidden">
                <img src="https://picsum.photos/300/200?random=1" alt="Random Image" class="mb-2 rounded-md">
                <p class="text-brown-800 dark:text-brown-200">This is the content of item 1, providing insights and details.</p>
            </div>
        </div>
        
        <!-- Accordion Item 2 -->
        <div class="bg-green-300 dark:bg-green-700 rounded-lg shadow-lg">
            <button class="flex justify-between w-full p-4 text-left text-brown-900 dark:text-gray-200">  
                <span>Item 2</span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-0 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" /></svg>
            </button>
            <div class="p-4 bg-green-200 dark:bg-green-600 hidden">
                <img src="https://picsum.photos/300/200?random=2" alt="Random Image" class="mb-2 rounded-md">
                <p class="text-brown-800 dark:text-brown-200">This is the content of item 2, providing insights and details.</p>
            </div>
        </div>
        
        <!-- Accordion Item 3 -->
        <div class="bg-red-300 dark:bg-red-700 rounded-lg shadow-lg">
            <button class="flex justify-between w-full p-4 text-left text-brown-900 dark:text-gray-200">  
                <span>Item 3</span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-0 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" /></svg>
            </button>
            <div class="p-4 bg-red-200 dark:bg-red-600 hidden">
                <img src="https://picsum.photos/300/200?random=3" alt="Random Image" class="mb-2 rounded-md">
                <p class="text-brown-800 dark:text-brown-200">This is the content of item 3, providing insights and details.</p>
            </div>
        </div>
    </div>
</div>

아코디언 구성 요소

어스 톤 색 구성표, 중간 정도의 복잡성, 소셜 미디어 목적, 반응형 디자인 및 어두운 테마 지원이 있는 다크 모드 아코디언 구성 요소. 자바스크립트가 없습니다.

미리보기 열기

                <div class="max-w-md mx-auto rounded-md overflow-hidden shadow-lg bg-stone-800 dark:bg-stone-900">
  <div class="accordion">
    <div class="accordion-item">
      <input type="checkbox" id="accordion1" class="hidden">
      <label for="accordion1" class="flex justify-between items-center p-4 cursor-pointer bg-stone-700 dark:bg-stone-800 text-stone-200 dark:text-stone-300">
        Section 1
        <svg class="w-5 h-5 text-stone-200 dark:text-stone-300 transform transition-transform duration-300 ease-in-out" 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="accordion-content px-4 pb-4 text-stone-300 dark:text-stone-400 hidden">
        <p>Content for section 1.</p>
      </div>
    </div>
    <div class="accordion-item">
      <input type="checkbox" id="accordion2" class="hidden">
      <label for="accordion2" class="flex justify-between items-center p-4 cursor-pointer bg-stone-700 dark:bg-stone-800 text-stone-200 dark:text-stone-300">
        Section 2
        <svg class="w-5 h-5 text-stone-200 dark:text-stone-300 transform transition-transform duration-300 ease-in-out" 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="accordion-content px-4 pb-4 text-stone-300 dark:text-stone-400 hidden">
        <p>Content for section 2.</p>
      </div>
    </div>
  </div>
</div>

<style>
.accordion-item input:checked ~ label svg {
  transform: rotate(180deg);
}
.accordion-item input:checked ~ .accordion-content {
  display: block;
}
</style>

다크 모드 아코디언

대시보드용 반응형 다크 모드 아코디언 구성 요소

미리보기 열기

                <div class="w-full max-w-md mx-auto rounded-lg overflow-hidden">
  <div class="bg-gray-800 text-gray-200 p-4 cursor-pointer flex justify-between items-center" onclick="this.nextElementSibling.classList.toggle('hidden')">
    <span>Section 1</span>
    <svg class="w-5 h-5 transform transition-transform duration-200" 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>
  </div>
  <div class="p-4 bg-gray-700 hidden">
    <p>Content for section 1.</p>
  </div>

  <div class="bg-gray-800 text-gray-200 p-4 cursor-pointer flex justify-between items-center" onclick="this.nextElementSibling.classList.toggle('hidden')">
    <span>Section 2</span>
    <svg class="w-5 h-5 transform transition-transform duration-200" 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>
  </div>
  <div class="p-4 bg-gray-700 hidden">
    <p>Content for section 2.</p>
  </div>

  <div class="bg-gray-800 text-gray-200 p-4 cursor-pointer flex justify-between items-center" onclick="this.nextElementSibling.classList.toggle('hidden')">
    <span>Section 3</span>
    <svg class="w-5 h-5 transform transition-transform duration-200" 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>
  </div>
  <div class="p-4 bg-gray-700 hidden">
    <p>Content for section 3.</p>
  </div>
</div>

파스텔 미니멀리스트 디자인의 아코디언 구성 요소

포트폴리오를 위한 복잡하고 반응형이며 어두운 테마와 호환되는 아코디언 구성 요소로, Tailwind CSS를 사용하여 미니멀리스트/플랫 파스텔 미학으로 디자인되었습니다. 여러 대화형 요소를 포함하고 이미지에 picsum.photos를 사용합니다.

미리보기 열기

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden md:max-w-2xl m-5">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/accordion1/400/300" alt="Project image">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-300 font-semibold">Project Name 1</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Project Title</a>
      <p class="mt-2 text-gray-500 dark:text-gray-400">This is a brief description of the project, highlighting its purpose and key features.</p>
      <div class="mt-4">
        <details class="group">
          <summary class="flex justify-between items-center font-medium cursor-pointer list-none text-gray-700 dark:text-gray-300">
            <span>Details</span>
            <span class="transition group-open:rotate-180">
              <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M12 15l-6-6 6-6"></path><path d="M18 15l-6-6 6-6"></path></svg>
            </span>
          </summary>
          <p class="text-gray-500 dark:text-gray-400 mt-3">
            More detailed information about the project, technologies used, challenges faced, and solutions implemented.
          </p>
        </details>
      </div>
    </div>
  </div>
</div>

<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden md:max-w-2xl m-5">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/accordion2/400/300" alt="Project image">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-green-500 dark:text-green-300 font-semibold">Project Name 2</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Another Project Title</a>
      <p class="mt-2 text-gray-500 dark:text-gray-400">This is a brief description of the second project, highlighting its purpose and key features.</p>
       <div class="mt-4">
        <details class="group">
          <summary class="flex justify-between items-center font-medium cursor-pointer list-none text-gray-700 dark:text-gray-300">
            <span>Details</span>
            <span class="transition group-open:rotate-180">
              <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M12 15l-6-6 6-6"></path><path d="M18 15l-6-6 6-6"></path></svg>
            </span>
          </summary>
          <p class="text-gray-500 dark:text-gray-400 mt-3">
            More detailed information about the project, technologies used, challenges faced, and solutions implemented.
          </p>
        </details>
      </div>
    </div>
  </div>
</div>

Skeuomorphism 파스텔 색상의 전자 상거래 아코디언

파스텔 색상의 전자 상거래를 위한 스큐어모픽 아코디언 구성 요소로, 다크 모드 지원을 포함하여 복잡한 상호 작용 및 응답성에 중점을 둡니다.

미리보기 열기

                <div class="max-w-md mx-auto">  <div class="bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 shadow-xl rounded-lg">    <div class="border-b border-gray-300 dark:border-gray-600">      <button class="w-full flex justify-between items-center p-4 text-gray-700 dark:text-gray-300 font-semibold">        <span>Product Details</span>        <svg class="w-5 h-5 transform transition-transform duration-200 rotate-0" 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-4 border-t border-gray-300 dark:border-gray-600 hidden">        <p class="text-gray-600 dark:text-gray-400 text-sm">Here you can add detailed product information like specifications, materials, etc. This content is hidden by default and revealed when the accordion is expanded.</p>      </div>    </div>    <div class="border-b border-gray-300 dark:border-gray-600">      <button class="w-full flex justify-between items-center p-4 text-gray-700 dark:text-gray-300 font-semibold">        <span>Shipping & Returns</span>        <svg class="w-5 h-5 transform transition-transform duration-200 rotate-0" 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-4 border-t border-gray-300 dark:border-gray-600 hidden">        <p class="text-gray-600 dark:text-gray-400 text-sm">Information about shipping options, delivery times, and return policy goes here. Keep it concise and easy to read.</p>      </div>    </div>    <div>      <button class="w-full flex justify-between items-center p-4 text-gray-700 dark:text-gray-300 font-semibold">        <span>Customer Reviews</span>        <svg class="w-5 h-5 transform transition-transform duration-200 rotate-0" 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-4 border-t border-gray-300 dark:border-gray-600 hidden">        <div class="flex items-start mb-4">          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Avatar">          <div>            <p class="text-gray-700 dark:text-gray-300 font-semibold">Jane Doe</p>            <p class="text-gray-600 dark:text-gray-400 text-sm">This product is amazing! Highly recommend.</p>          </div>        </div>        <div class="flex items-start">          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">          <div>            <p class="text-gray-700 dark:text-gray-300 font-semibold">John Smith</p>            <p class="text-gray-600 dark:text-gray-400 text-sm">Good quality and fast shipping.</p>          </div>        </div>      </div>    </div>  </div></div>

카테고리

레트로어코디언WithEarthTones

아코디언 구성 요소

본보기

레트로 대시보드 아코디언

아코디언 구성 요소

레트로 빈티지 아코디언 컴포넌트

아코디언 구성 요소

다크 모드 아코디언

파스텔 미니멀리스트 디자인의 아코디언 구성 요소

Skeuomorphism 파스텔 색상의 전자 상거래 아코디언