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>

関連コンポーネント

Playful_Booking_Media_Component

予約/予約システム用のシンプルで遊び心のあるレスポンシブなメディアコンポーネントで、トライアドカラースキーム、丸みを帯びた要素、ダークモードのサポートが特徴です。

開ける

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

Tailwind CSS で設計された、魅力的なアニメーションとのマイクロインタラクションを特徴とするレスポンシブ メディア コンポーネント。ダークテーマをサポートし、プレースホルダー画像とアバターが含まれています。

開ける

バウハウスの類似メディアコンポーネント

バウハウスにインスパイアされたデザインのレスポンシブメディアコンポーネントで、類似の配色を使用しており、政府/公共サービスのWebサイトに適しています。幾何学的な形状、主要な類似色、およびダークモードのサポートを備えています。

開ける