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

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

Tailwind CSS を使用してスキューモーフィズム スタイルで設計されたメディア コンポーネントで、レスポンシブ エフェクトとダーク テーマのサポートが特徴です。

プレビュー

HTMLコード 

<div class="max-w-sm mx-auto">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200" alt="Placeholder Image">
        <div class="p-6">
            <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Media Title</h2>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the media component. It mimics a real-world object with its skeuomorphic design.</p>
            <div class="flex items-center mt-4">
                <img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
                <div class="ml-3">
                    <p class="text-sm text-gray-600 dark:text-gray-400">Posted by John Doe</p>
                    <p class="text-xs text-gray-500 dark:text-gray-500">2 hours ago</p>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    /* Dark theme support */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1A202C;
        }
    }
</style>

関連コンポーネント

Monospace_Developer_Media_Component

モノスペース/開発者デザインスタイルとオーシャン/ブルーの配色を備えた、学習プラットフォーム向けに設計された、複雑で教育指向のメディアコンポーネント。メディア再生、コード スニペット、構造化コンテンツ セクションが含まれます。

開ける

Brutalism ブッキング メディア コンポーネント

予約/予約システム用のシンプルなブルータリズムスタイルのメディアコンポーネントで、高コントラストと補色スキームが特徴で、ダークモードをサポートして完全にレスポンシブです。

開ける

ミニマリストメディアコンポーネント

ビジネス/企業のWebサイト向けのシンプルでクリーンでレスポンシブなメディアコンポーネントで、キャンディー/スウィートカラーとダークモードのサポートを備えています。

開ける