コンポーネント メディアの埋め込み メディア埋め込みコンポーネント

メディア埋め込みコンポーネント

奥行きとエンゲージメント、レスポンシブ効果、ダークモードのサポートのための3Dデザインスタイルを特徴とするメディア埋め込みコンポーネント。

プレビュー

HTMLコード

<div class="max-w-sm mx-auto p-5 bg-white rounded-lg shadow-lg dark:bg-gray-800 transition-transform transform hover:scale-105 shadow-lg dark:shadow-2xl">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-lg" />
        <div class="ml-3">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">2 hours ago</p>
        </div>
    </div>
    <div class="mb-4">
        <iframe class="w-full h-64 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div>
        <p class="text-gray-700 dark:text-gray-300">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac neque euismod, scelerisque erat a, sollicitudin odio. Integer ac venenatis elit.
        </p>
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a202c;
    }
}
</style>

関連コンポーネント

メディア埋め込みコンポーネント

ブログ/コンテンツ消費用の複雑でレスポンシブなメディア埋め込みコンポーネントで、オーガニック/自然にインスパイアされたデザイン、ジュエルトーン、ダークモードのサポートが特徴です。ビデオプレーヤー、記事コンテンツ、および関連メディアが含まれています。

開ける

メディア埋め込みコンポーネント

Glassmorphism Media Embed コンポーネント アース トーン ビジネス/企業 Web サイト用。シンプルなレイアウト、レスポンシブ、ダークテーマのサポート。

開ける

メディア埋め込みコンポーネント

Glassmorphism デザイン、アース トーンの色、ダーク モードのサポートを備えたレスポンシブ メディア エンベッド コンポーネントで、ソーシャル メディアのユースケース向けに Tailwind CSS で構築されています。すりガラス効果を含み、プレースホルダー画像/アバターを使用します。

開ける