레트로 빈티지 아코디언 컴포넌트
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>관련 구성 요소
파스텔 미니멀리스트 디자인의 아코디언 구성 요소
포트폴리오를 위한 복잡하고 반응형이며 어두운 테마와 호환되는 아코디언 구성 요소로, Tailwind CSS를 사용하여 미니멀리스트/플랫 파스텔 미학으로 디자인되었습니다. 여러 대화형 요소를 포함하고 이미지에 picsum.photos를 사용합니다.
기업프로페셔널아코디언
고대비의 기업/전문가 테마의 아코디언 구성 요소는 비영리 및 자선 단체에 적합합니다. 깔끔한 디자인, 대담한 색상 조합, 다크 모드 지원으로 완벽한 반응성이 특징입니다.