아코디언 구성 요소
반응형 아코디언 컴포넌트는 어두운 테마를 지원하고, 단색 색 구성표와 포트폴리오 웹 사이트를 위한 마이크로 인터랙션을 제공합니다.
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>관련 구성 요소
아코디언 구성 요소
3D 디자인, 반응형 효과 및 어두운 테마가 있는 아코디언 구성 요소는 HTML 및 CSS(Tailwind CSS)만 사용합니다. 구성 요소는 다크 모드에 CSS를 사용하며 부드러운 아코디언을 위한 전환을 포함합니다. 완벽하게 반응합니다. JavaScript는 사용되지 않습니다.