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>

関連コンポーネント

Corporate_Professional_Forum_Modal

フォーラム/コミュニティプラットフォーム向けの複雑で応答性が高く、プロフェッショナルなモーダルコンポーネントで、類似のカラースキームとダークモードのサポートを備えています。

開ける

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

Tailwind CSSでデザインされたレスポンシブなレトロ/ビンテージモーダルコンポーネントで、ダークモードのサポートとノスタルジックな80年代/90年代の美学が含まれています。

開ける

Industrial_Sepia_Medical_Modal

セピア/ブラウンの色調を使用し、ヘルスケア/医療用途向けに設計された、工業的な原材料の美学を備えたシンプルで応答性の高いモーダルコンポーネントで、ダークモードがサポートされています。

開ける