CCHub Logo CCHub Tailwind Collection
구성 요소 아코디언 레트로아코디언심플

레트로아코디언심플

비즈니스 웹 사이트를 위한 간단하고 반응이 빠른 레트로 테마의 아코디언 구성 요소로, Tailwind CSS를 사용하여 다크 모드를 지원합니다. 이 구성 요소는 트라이어딕 색 구성표를 사용하며 JavaScript가 필요하지 않습니다.

미리 보기

HTML 코드 

<div x-data="{ open: false }" class="border border-gray-300 dark:border-gray-700 rounded-lg mb-4">
  <button @click="open = !open" class="w-full flex justify-between items-center p-4 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none">
    <span class="font-bold">Accordion Title</span>
    <svg class="w-5 h-5 transform transition-transform duration-200" :class="{ 'rotate-180': open }" 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" class="p-4 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300">
    <p>Accordion content goes here. This is a simple example with basic styling.</p>
  </div>
</div>

관련 구성 요소

아코디언 구성 요소

3D 디자인, 반응형 효과 및 어두운 테마가 있는 아코디언 구성 요소는 HTML 및 CSS(Tailwind CSS)만 사용합니다. 구성 요소는 다크 모드에 CSS를 사용하며 부드러운 아코디언을 위한 전환을 포함합니다. 완벽하게 반응합니다. JavaScript는 사용되지 않습니다.

열다

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

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

열다

비영리 단체를 위한 Bauhaus Accordion

Bauhaus의 영향으로 디자인된 단순하고 반응성이 뛰어난 아코디언 구성 요소와 따뜻한 일몰 색 구성표로 비영리 단체에 적합합니다. 다크 모드 지원이 포함됩니다.

열다