CCHub Logo CCHub Tailwind Collection
コンポーネント 資本 ダークモードモーダルコンポーネント

ダークモードモーダルコンポーネント

シンプルで応答性の高いダークモードモーダルコンポーネントで、読み取りとコンテンツの消費のために設計されたものです。補色配色と最小限のレイアウトが特徴で、ブログやコンテンツ主導のWebサイトに適しています。

プレビュー

HTMLコード 

<div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-800 bg-opacity-75 dark:bg-gray-900" role="dialog" aria-modal="true">
    <div class="bg-gray-900 rounded-lg shadow-lg max-w-sm w-full p-6">
        <button class="absolute top-3 right-3 text-gray-500 hover:text-gray-300 dark:text-gray-400 dark:hover:text-gray-200" aria-label="Close">&times;</button>
        <h2 class="text-xl text-white font-semibold mb-4">Blog Post Title</h2>
        <img class="w-full h-32 object-cover rounded-lg mb-4" src="https://picsum.photos/400/200" alt="Random Image">
        <p class="text-gray-300 dark:text-gray-200 mb-4">This is a simple modal component designed for displaying content in dark mode. It is responsive and features a clean layout that aids in reading.</p>
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
                <p class="text-sm text-gray-400 dark:text-gray-300">Posted by John Doe</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">3 minutes ago</p>
            </div>
        </div>
    </div>
</div>

関連コンポーネント

レトロヴィンテージモーダルコンポーネント

Tailwind CSSを使用してデザインされた、作品や製品を展示するための補色配色を備えたシンプルなレトロ/ビンテージモーダルコンポーネント。

開ける

スキューモーフィック モーダル コンポーネント

複雑なレスポンシブモーダルモーダルコンポーネントで、eコマース用の補色を使用したスキューモーフィックデザインでスタイリングされています。

開ける

GlassmorphismModalコンポーネント

類似の配色、適度な複雑さ、ブログ/コンテンツの表示に適した Glassmorphism スタイルのモーダル コンポーネント。Tailwind CSSを使用したダークテーマをサポートするレスポンシブデザインが特徴です。

開ける