CCHub Logo CCHub Tailwind Collection
구성 요소 아코디언 아코디언 구성 요소

아코디언 구성 요소

반응형 아코디언 컴포넌트는 어두운 테마를 지원하고, 단색 색 구성표와 포트폴리오 웹 사이트를 위한 마이크로 인터랙션을 제공합니다.

미리 보기

HTML 코드 

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

관련 구성 요소

산업용 아코디언 뉴스 구성 요소

뉴스 및 저널리즘 웹사이트를 위한 인더스트리얼 스타일의 아코디언 구성 요소로, 노출된 요소, 금속 질감 및 가을 색상 팔레트를 특징으로 합니다. 반응형이며 여러 대화형 요소를 위해 설계되었으며 다크 모드 지원을 포함합니다.

열다

Industrial_Vibrant_Dating_Accordion

적당히 복잡한 인더스트리얼 스타일의 아코디언 구성 요소로 생생한 색상으로 데이트 및 소셜 플랫폼에 적합합니다. 노출된 요소, 무거운 타이포그래피, 다크 모드 지원으로 완전한 응답성을 제공합니다.

열다

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

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

열다