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

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

レスポンシブエフェクトとダークテーマのサポートを備えたレトロなビンテージスタイルのギャラリーコンポーネント。

プレビュー

HTMLコード 

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Retro Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=1" alt="Gallery Image 1" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=2" alt="Gallery Image 2" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=3" alt="Gallery Image 3" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=4" alt="Gallery Image 4" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=5" alt="Gallery Image 5" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=6" alt="Gallery Image 6" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=7" alt="Gallery Image 7" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=8" alt="Gallery Image 8" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
    </div>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        .bg-white { background-color: #1a202c; }
        .text-gray-800 { color: #edf2f7; }
    }
</style>

関連コンポーネント

Eコマース製品ギャラリー

複雑でレスポンシブ、ダークテーマに対応したギャラリーコンポーネントで、ミニマルなデザイン、補色的な配色、eコマースに適した複数のインタラクティブ要素を備えています。

開ける

スキューモーフィック暗号ギャラリー

暗号通貨およびブロックチェーンアプリケーション用に設計された複雑なスキューモーフィックギャラリーコンポーネントで、補色、応答性、およびダークモードのサポートを特長としています。埋め込み式ボタンやエンボス加工されたフレームなど、現実世界の要素を模倣しています。

開ける

ミニマリストギャラリーコンポーネント

夕焼け/暖色系の配色を備えたレスポンシブでミニマリストの画像ギャラリーコンポーネントで、テクノロジー/ SaaSアプリケーションに適しています。ダークモードのサポートが含まれています。

開ける