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>

관련 구성 요소

Neumorphism Accordion 구성 요소

뉴모픽 디자인, 반응형 효과 및 Tailwind CSS를 사용하는 어두운 테마를 지원하는 아코디언 구성 요소.

열다

기업프로페셔널아코디언

고대비의 기업/전문가 테마의 아코디언 구성 요소는 비영리 및 자선 단체에 적합합니다. 깔끔한 디자인, 대담한 색상 조합, 다크 모드 지원으로 완벽한 반응성이 특징입니다.

열다

Neumorphic Accordion 구성 요소

Triadic 색 구성표가 있는 Neumorphic Accordion 구성 요소로, 비즈니스 웹 사이트에 적합합니다. HTML 및 Tailwind CSS로만 순전히 구현된 다크 모드를 지원하는 반응형 디자인이 특징입니다.

열다