CCHub Logo CCHub Tailwind Collection
コンポーネント アコーディオン ソーシャルメディアアコーディオン

ソーシャルメディアアコーディオン

ダークテーマのレスポンシブアコーディオンコンポーネント マテリアルデザインの原則、トライアドカラースキーム、シンプルなレイアウトを使用したソーシャルメディアインターフェイスのサポート。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>

関連コンポーネント

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

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

開ける

NonProfit_Retro_Accordion

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

開ける

Neon_Glow_Sepia_Photography_Accordion

セピア/ブラウンの色調のネオン/グロー効果を備えた複雑で応答性の高いアコーディオンコンポーネントは、写真ポートフォリオ用に設計されており、インタラクティブな要素とダークモードのサポートを備えています。

開ける