소셜 미디어 아코디언
어두운 테마가 있는 반응형 아코디언 구성 요소는 Material Design 원칙, 트라이어딕 색 구성표 및 간단한 레이아웃을 사용하여 소셜 미디어 인터페이스를 지원합니다. JavaScript는 없으며 Tailwind CSS 클래스가있는 HTML 만 있습니다. 다크 모드 스타일은 dark: 접두사를 사용하여 포함됩니다.
HTML 코드
<div x-data='{ open: false }' class='max-w-md mx-auto bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md overflow-hidden md:max-w-lg my-4'>
<div class='md:flex'>
<div class='w-full p-4'>
<div class='flex justify-between items-center'>
<h2 class='text-lg leading-6 font-medium text-stone-900 dark:text-stone-100'>Accordion Title 1</h2>
<button x-on:click='open = !open' class='text-stone-500 dark:text-stone-300 hover:text-stone-600 dark:hover:text-stone-400 focus:outline-none'>
<svg class='h-6 w-6 transform' :class='{ "rotate-180": open }' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'></path>
</svg>
</button>
</div>
<div x-show='open' class='mt-2 text-sm text-stone-600 dark:text-stone-400'>
<p>This is the collapsible content for Accordion Item 1. It provides additional information or details related to the title. The design is simple and follows Material Design principles with subtle shadows and rounded corners.</p>
</div>
</div>
</div>
</div>
<div x-data='{ open: false }' class='max-w-md mx-auto bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md overflow-hidden md:max-w-lg my-4'>
<div class='md:flex'>
<div class='w-full p-4'>
<div class='flex justify-between items-center'>
<h2 class='text-lg leading-6 font-medium text-stone-900 dark:text-stone-100'>Accordion Title 2</h2>
<button x-on:click='open = !open' class='text-stone-500 dark:text-stone-300 hover:text-stone-600 dark:hover:text-stone-400 focus:outline-none'>
<svg class='h-6 w-6 transform' :class='{ "rotate-180": open }' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'></path>
</svg>
</button>
</div>
<div x-show='open' class='mt-2 text-sm text-stone-600 dark:text-stone-400'>
<p>This is the collapsible content for Accordion Item 2. You can add more text, images, or other HTML elements here. The triadic color scheme is subtly applied through text and background colors that are somewhat evenly spaced on the color wheel, like various shades of grey/stone which could be paired with other triadic colors like orange and green in a larger layout.</p>
</div>
</div>
</div>
</div>관련 구성 요소
레트로 대시보드 아코디언
Retro/Vintage Accordion Component for Dashboard with Complementary color scheme and Complex complexity(보색 구성표와 복잡한 복잡성을 가진 대시보드용 레트로/빈티지 아코디언 구성 요소). Tailwind CSS를 사용한 반응형 디자인 및 어두운 테마 지원이 포함됩니다. 자바스크립트가 없습니다. 이미지 제공 picsum.photos, 아바타 제공 randomuser.me.