CCHub Logo CCHub Tailwind Collection
コンポーネント アコーディオン アコーディオンコンポーネント

アコーディオンコンポーネント

ダークテーマのサポート、単色の配色、ポートフォリオWebサイトのマイクロインタラクションを備えたレスポンシブアコーディオンコンポーネント。

プレビュー

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>

関連コンポーネント

レトロなダッシュボードアコーディオン

補完的な配色と複雑な複雑さを備えたダッシュボード用のレトロ/ビンテージアコーディオンコンポーネント。レスポンシブデザインとTailwind CSSを使用したダークテーマのサポートが含まれています。JavaScript はありません。画像はpicsum.photos経由、アバターは randomuser.me 経由。

開ける

インダストリアルアコーディオンニュースコンポーネント

ニュースやジャーナリズムのウェブサイト向けのインダストリアルスタイルのアコーディオンコンポーネントで、露出した要素、メタリックなテクスチャ、秋のカラーパレットが特徴です。レスポンシブで、複数のインタラクティブ要素用に設計されており、ダークモードのサポートが含まれています。

開ける

レトロヴィンテージアコーディオンコンポーネント

ダッシュボード データの視覚化のためのアース トーンのレトロ/ビンテージ スタイルのアコーディオン コンポーネント。中程度の複雑さ向けに設計されており、レスポンシブテーマとダークテーマがサポートされています。

開ける