CCHub Logo CCHub Tailwind Collection
コンポーネント 製品ギャラリー 製品ギャラリーコンポーネント

製品ギャラリーコンポーネント

ダークモード UI 用に設計されたレスポンシブ製品ギャラリーコンポーネントで、補色が特徴で、ソーシャルメディアネットワーキングインターフェイスに適しています。

プレビュー

HTMLコード 

<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg">
    <h2 class="text-xl font-bold mb-4">Product Gallery</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Product Item -->
        <div class="bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-48 object-cover rounded-t-lg">
            <div class="mt-2">
                <h3 class="text-lg font-semibold">Product 1</h3>
                <p class="text-gray-300">Description of product 1 in this gallery.</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-gray-400">by John Doe</span>
                </div>
            </div>
        </div>
        <!-- Product Item -->
        <div class="bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-48 object-cover rounded-t-lg">
            <div class="mt-2">
                <h3 class="text-lg font-semibold">Product 2</h3>
                <p class="text-gray-300">Description of product 2 in this gallery.</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-gray-400">by Jane Doe</span>
                </div>
            </div>
        </div>
        <!-- Product Item -->
        <div class="bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-48 object-cover rounded-t-lg">
            <div class="mt-2">
                <h3 class="text-lg font-semibold">Product 3</h3>
                <p class="text-gray-300">Description of product 3 in this gallery.</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-gray-400">by Alex Smith</span>
                </div>
            </div>
        </div>
        <!-- Additional Product Items can go here -->
    </div>
</div>

関連コンポーネント

製品ギャラリーコンポーネント

Tailwind CSS を使用したレスポンシブ製品ギャラリー コンポーネントで、Neumorphic デザイン スタイル、補色スキーム、ビジネス Web サイトに適した複雑なレイアウトを備えています。ダークモードのサポートが含まれており、picsum.photosの画像を使用します。

開ける

Watercolor_Artistic_Dating_Product_Gallery

「水彩/芸術的」なデザインスタイルと「キャンディ/スウィート」の配色を備えた複雑でレスポンシブな製品ギャラリーコンポーネントで、デートやソーシャルプラットフォームに適しています。複数のインタラクティブ要素、ダークモードのサポート、セマンティックHTMLを備えています。

開ける

製品ギャラリーコンポーネント

マテリアルデザインの原則に基づいて設計されたシンプルなレスポンシブ製品ギャラリーコンポーネントで、鮮やかな色とダークモードのサポートが特徴で、ダッシュボードに適しています。このコンポーネントは、スタイル設定に Tailwind CSS を使用します。

開ける