CCHub Logo CCHub Tailwind Collection
コンポーネント 画像ライトボックス イメージライトボックスコンポーネント

イメージライトボックスコンポーネント

eコマースWebサイト向けに設計されたシンプルなレスポンシブ画像ライトボックスコンポーネントで、ダークモードスタイルと類似の配色が特徴です。

プレビュー

HTMLコード 

<div class="fixed inset-0 flex items-center justify-center bg-gray-900 dark:bg-gray-800 z-50">
    <div class="relative w-full max-w-2xl">
        <button class="absolute top-0 right-0 p-2 text-white hover:bg-gray-700 dark:hover:bg-gray-600 rounded-full focus:outline-none" aria-label="Close">
            &times;
        </button>
        <img src="https://picsum.photos/800/600" alt="Product Image" class="w-full h-auto rounded-lg shadow-lg">
        <div class="flex justify-between mt-4">
            <button class="flex items-center justify-center w-10 h-10 bg-gray-700 dark:bg-gray-600 rounded-full text-white hover:bg-gray-600 dark:hover:bg-gray-500">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-full h-full rounded-full">
            </button>
            <button class="flex items-center justify-center w-10 h-10 bg-gray-700 dark:bg-gray-600 rounded-full text-white hover:bg-gray-600 dark:hover:bg-gray-500">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-full h-full rounded-full">
            </button>
        </div>
    </div>
</div>

関連コンポーネント

Cyberpunk_Real_Estate_Lightbox

サイバーパンクにインスパイアされた落ち着いた配色を備えたシンプルでレスポンシブな画像ライトボックスコンポーネントで、不動産物件のリスティングに適しています。ダークモードのサポートを備え、セマンティックHTMLを使用します。

開ける

イメージライトボックスコンポーネント

e コマース用に設計されたレスポンシブ イメージ ライトボックス コンポーネントで、ダーク モードのサポートとアース トーンの配色が特徴です。

開ける

イメージライトボックスコンポーネント

ブルータリズムスタイルでデザインされた複雑な画像ライトボックスコンポーネントで、ソーシャルメディアインターフェイスに適しており、グレースケールの配色とダークモードをサポートするための高コントラストが特徴です。

開ける