CCHub Logo CCHub Tailwind Collection
コンポーネント アコーディオン ダークモードアコーディオン

ダークモードアコーディオン

ダッシュボード用のレスポンシブダークモードアコーディオンコンポーネント

プレビュー

HTMLコード 

<div class="w-full max-w-md mx-auto rounded-lg overflow-hidden">
  <div class="bg-gray-800 text-gray-200 p-4 cursor-pointer flex justify-between items-center" onclick="this.nextElementSibling.classList.toggle('hidden')">
    <span>Section 1</span>
    <svg class="w-5 h-5 transform transition-transform duration-200" 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>
  </div>
  <div class="p-4 bg-gray-700 hidden">
    <p>Content for section 1.</p>
  </div>

  <div class="bg-gray-800 text-gray-200 p-4 cursor-pointer flex justify-between items-center" onclick="this.nextElementSibling.classList.toggle('hidden')">
    <span>Section 2</span>
    <svg class="w-5 h-5 transform transition-transform duration-200" 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>
  </div>
  <div class="p-4 bg-gray-700 hidden">
    <p>Content for section 2.</p>
  </div>

  <div class="bg-gray-800 text-gray-200 p-4 cursor-pointer flex justify-between items-center" onclick="this.nextElementSibling.classList.toggle('hidden')">
    <span>Section 3</span>
    <svg class="w-5 h-5 transform transition-transform duration-200" 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>
  </div>
  <div class="p-4 bg-gray-700 hidden">
    <p>Content for section 3.</p>
  </div>
</div>

関連コンポーネント

NonProfit_Retro_Accordion

非営利団体/慈善団体のWebサイト向けに設計された、レトロをテーマにした複雑なアコーディオンコンポーネントで、落ち着いた色のグラデーション、スムーズなトランジション、ダークモードのサポートによる完全な応答性が特徴です。

開ける

レトロアコーディオンシンプル

ビジネスWebサイト向けのシンプルでレスポンシブなレトロなテーマのアコーディオンコンポーネントで、Tailwind CSSを使用したダークモードがサポートされています。このコンポーネントはトライアドカラースキームを使用し、JavaScript は必要ありません。

開ける

Skeuomorphism パステルカラーのEコマースアコーディオン

パステルカラーのEコマース用のスキューモーフィックアコーディオンコンポーネントで、ダークモードのサポートなど、複雑なインタラクションと応答性に焦点を当てています。

開ける