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

아코디언 구성 요소

Neumorphism 디자인, 반응형 효과 및 어두운 테마를 지원하는 아코디언 구성 요소.

미리 보기

HTML 코드 

<div class="max-w-md mx-auto p-8">
  <div class="shadow-neumorphism-light dark:shadow-neumorphism-dark rounded-lg mb-4">
    <div class="p-4 cursor-pointer">
      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Section 1</h3>
    </div>
    <div class="p-4 hidden">
      <p class="text-gray-700 dark:text-gray-300">Content for section 1.</p>
    </div>
  </div>

  <div class="shadow-neumorphism-light dark:shadow-neumorphism-dark rounded-lg mb-4">
    <div class="p-4 cursor-pointer">
      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Section 2</h3>
    </div>
    <div class="p-4 hidden">
      <p class="text-gray-700 dark:text-gray-300">Content for section 2.</p>
    </div>
  </div>

  <div class="shadow-neumorphism-light dark:shadow-neumorphism-dark rounded-lg">
    <div class="p-4 cursor-pointer">
      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Section 3</h3>
    </div>
    <div class="p-4 hidden">
      <p class="text-gray-700 dark:text-gray-300">Content for section 3.</p>
    </div>
  </div>
</div>

<style>
.shadow-neumorphism-light {
  box-shadow: 7px 7px 15px #cbced1, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphism-dark {
  box-shadow: 7px 7px 15px #222222, -7px -7px 15px #444444;
}
</style>

관련 구성 요소

바우하우스 아코디언 구성 요소 - 블로그/콘텐츠

바우하우스(Bauhaus)에서 영감을 받은 디자인의 복잡하고 반응이 빠른 아코디언 구성 요소로, 기하학적 형태, 멋진 뉴트럴 색상, 블로그/콘텐츠 소비를 위한 풍부한 인터랙티브 요소가 특징입니다. 다크 모드 지원이 포함됩니다.

열다

Neumorphic Accordion 구성 요소

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

열다

레트로아코디언심플

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

열다