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

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

Tailwind CSS を使用してダークモードで設計されたレスポンシブ画像ライトボックスコンポーネント。暗い背景、不透明度効果、レスポンシブデザインが特徴で、さまざまな画面サイズに対応します。

プレビュー

HTMLコード 

<div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-75 hidden" id="lightbox">
    <div class="relative">
        <img src="https://picsum.photos/800/600" alt="Lightbox Image" class="rounded-lg shadow-lg">
        <button class="absolute top-2 right-2 text-white bg-gray-800 hover:bg-gray-700 rounded-full p-2 focus:outline-none" onclick="document.getElementById('lightbox').classList.add('hidden')">
            &times;
        </button>
    </div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-4">
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/200" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/201" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/202" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/203" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/204" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/205" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
</div>

関連コンポーネント

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

現実世界の対応物を模倣するように設計されたスキューモーフィック イメージ ライトボックス コンポーネントで、レスポンシブ エフェクトと Tailwind CSS を使用したダーク テーマのサポートが特徴です。

開ける

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

ミニマリストのフラットデザイン、単色の配色、適度な複雑さを備えたレスポンシブイメージライトボックスコンポーネントで、ソーシャルメディアインターフェイスに適しています。Tailwind CSSのdark:プレフィックスを使用したダークテーマをサポートし、JavaScriptは必要ありません。画像はpicsum.photosから提供されています。

開ける

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

ブログやコンテンツプラットフォームに適したブルータリズムスタイルの画像ライトボックスコンポーネントで、アースカラーと複雑なインタラクティブ要素で設計されています。

開ける