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

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

Neumorphismデザイン、レスポンシブエフェクト、ダークテーマのサポートを備えたアコーディオンコンポーネント。

プレビュー

HTMLコード 

<div class="max-w-md mx-auto p-8">
  <div class="shadow-neumorphism-light dark:shadow-neumorphism-dark rounded-lg mb-4">
    <div class="p-4 cursor-pointer">
      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Section 1</h3>
    </div>
    <div class="p-4 hidden">
      <p class="text-gray-700 dark:text-gray-300">Content for section 1.</p>
    </div>
  </div>

  <div class="shadow-neumorphism-light dark:shadow-neumorphism-dark rounded-lg mb-4">
    <div class="p-4 cursor-pointer">
      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Section 2</h3>
    </div>
    <div class="p-4 hidden">
      <p class="text-gray-700 dark:text-gray-300">Content for section 2.</p>
    </div>
  </div>

  <div class="shadow-neumorphism-light dark:shadow-neumorphism-dark rounded-lg">
    <div class="p-4 cursor-pointer">
      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Section 3</h3>
    </div>
    <div class="p-4 hidden">
      <p class="text-gray-700 dark:text-gray-300">Content for section 3.</p>
    </div>
  </div>
</div>

<style>
.shadow-neumorphism-light {
  box-shadow: 7px 7px 15px #cbced1, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphism-dark {
  box-shadow: 7px 7px 15px #222222, -7px -7px 15px #444444;
}
</style>

関連コンポーネント

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

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

開ける

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

ダークテーマをサポートするビジネス/企業のWebサイト向けに設計された3Dスタイルのアコーディオンコンポーネント。

開ける

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

アースカラーの配色、適度な複雑さ、ソーシャルメディア用、レスポンシブデザイン、ダークテーマのサポートを備えたダークモードアコーディオンコンポーネント。JavaScript はありません。

開ける