CCHub Logo CCHub Tailwind Collection
コンポーネント メディアの埋め込み メディア埋め込みコンポーネント

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

3D デザインスタイル、補色スキーム、ダークモードをサポートするレスポンシブレイアウトを備えた e コマース用に設計されたメディア埋め込みコンポーネント。

プレビュー

HTMLコード 

<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-2xl transform hover:scale-105 transition-transform duration-300 ease-in-out">
    <div class="relative">
        <img src="https://picsum.photos/400/200" alt="Product Image" class="w-full h-48 object-cover rounded-t-lg">
        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4 rounded-b-lg">
            <h2 class="text-white text-lg font-semibold">Product Title</h2>
            <p class="text-gray-300">Short description of the product goes here.</p>
        </div>
    </div>
    <div class="p-4">
        <p class="text-gray-800 dark:text-gray-200">Add to Cart</p>
        <div class="flex justify-between items-center mt-2">
            <span class="text-gray-800 dark:text-gray-200 font-bold text-xl">$49.99</span>
            <button class="bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 text-white font-bold py-2 px-4 rounded">Buy Now</button>
        </div>
    </div>
</div>

関連コンポーネント

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

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

開ける

スキューモーフィックメディア埋め込みコンポーネント

スキューモーフィズムデザイン、類似の配色、ビジネスWebサイト向けの適度な複雑さを備えたレスポンシブメディア埋め込みコンポーネント。Tailwind CSS を使用したダーク モードのサポートが含まれています。

開ける

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

サイバーパンクとコーポレートブルーの美学を備えたシンプルでレスポンシブなメディア埋め込みコンポーネントで、ダークモードをサポートするソーシャルメディアインターフェイス用に設計されています。

開ける