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

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

Tailwind CSS を使用して Glassmorphism スタイルで設計されたレスポンシブ画像ライトボックスコンポーネント。このコンポーネントは、すりガラスのような半透明の要素とぼかし効果を備えたダーク テーマをサポートしています。

プレビュー

HTMLコード 

<div class="relative">
    <button class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 inline-flex items-center p-2" id="open-lightbox">
        <img src="https://picsum.photos/40/40?random" alt="Thumbnail" class="rounded-full">
    </button>
    <div class="hidden fixed inset-0 bg-black bg-opacity-50 transition-opacity" id="lightbox">
        <div class="flex items-center justify-center h-full">
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-lg rounded-lg p-4">
                <img src="https://picsum.photos/800/600?random" alt="Lightbox Image" class="rounded-md">
                <button class="mt-4 bg-red-500 dark:bg-red-700 text-white rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" id="close-lightbox">Close</button>
            </div>
        </div>
    </div>
</div>

<style>
    /* Lightbox toggle visibility */
    #lightbox:target {
        display: flex;
    }
</style>

関連コンポーネント

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

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

開ける

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

アースカラーのブルータリズムスタイルでデザインされたレスポンシブ画像ライトボックスコンポーネント。ダッシュボードの視覚化のためのダーク モードのサポートを特徴としています。

開ける

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

ダッシュボード用に設計されたレスポンシブ画像ライトボックスコンポーネントで、3Dスタイルと単色の配色が特徴です。これには、ホバー効果と、ダークモードをサポートするためのTailwind CSSを使用したモーダル機能が含まれています。

開ける