레트로 빈티지 아코디언 컴포넌트
Dashboard 데이터 시각화를 위한 어스 톤이 있는 레트로/빈티지 스타일의 아코디언 구성 요소입니다. 반응형 및 어두운 테마 지원으로 중간 수준의 복잡성을 위해 설계되었습니다.
HTML 코드
<div class="flex flex-col p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-lg text-brown-700 dark:text-brown-300 font-bold mb-4">Dashboard</h2>
<div class="accordion space-y-4">
<!-- Accordion Item 1 -->
<div class="bg-yellow-300 dark:bg-yellow-700 rounded-lg shadow-lg">
<button class="flex justify-between w-full p-4 text-left text-brown-900 dark:text-gray-200">
<span>Item 1</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-0 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" /></svg>
</button>
<div class="p-4 bg-yellow-200 dark:bg-yellow-600 hidden">
<img src="https://picsum.photos/300/200?random=1" alt="Random Image" class="mb-2 rounded-md">
<p class="text-brown-800 dark:text-brown-200">This is the content of item 1, providing insights and details.</p>
</div>
</div>
<!-- Accordion Item 2 -->
<div class="bg-green-300 dark:bg-green-700 rounded-lg shadow-lg">
<button class="flex justify-between w-full p-4 text-left text-brown-900 dark:text-gray-200">
<span>Item 2</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-0 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" /></svg>
</button>
<div class="p-4 bg-green-200 dark:bg-green-600 hidden">
<img src="https://picsum.photos/300/200?random=2" alt="Random Image" class="mb-2 rounded-md">
<p class="text-brown-800 dark:text-brown-200">This is the content of item 2, providing insights and details.</p>
</div>
</div>
<!-- Accordion Item 3 -->
<div class="bg-red-300 dark:bg-red-700 rounded-lg shadow-lg">
<button class="flex justify-between w-full p-4 text-left text-brown-900 dark:text-gray-200">
<span>Item 3</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-0 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" /></svg>
</button>
<div class="p-4 bg-red-200 dark:bg-red-600 hidden">
<img src="https://picsum.photos/300/200?random=3" alt="Random Image" class="mb-2 rounded-md">
<p class="text-brown-800 dark:text-brown-200">This is the content of item 3, providing insights and details.</p>
</div>
</div>
</div>
</div>관련 구성 요소
아코디언 구성 요소
3D 디자인, 반응형 효과 및 어두운 테마가 있는 아코디언 구성 요소는 HTML 및 CSS(Tailwind CSS)만 사용합니다. 구성 요소는 다크 모드에 CSS를 사용하며 부드러운 아코디언을 위한 전환을 포함합니다. 완벽하게 반응합니다. JavaScript는 사용되지 않습니다.